How to set CORS headers to a client

Question

I'm using this client

var client = new forcetk.Client();

To make requests. I'm trying to pass another URL but the

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

error shows up. Can i set up any headers to the client? Is there a way to make my client's request inside an XMLHttpRequest call? Any help would be much appreciated. Thanks in advance.

Here is my oversimplified code

> forcetk.Client.prototype.createBlob = function (objtype, fields,
> filename, payloadField, payload, callback, error, retry) {
> 'use strict';
>         let res = this.blob('/' + this.apiVersion + '/sobjects/' + objtype + '/',
>                          fields, filename, payloadField, payload, callback, error, retry);
>         res.header("Access-Control-Allow-Origin", "*");
>         return res;
>     };

Can you edit your question to share the code that you are using to make the request? Including the URL that you are requesting resources form would be helpful - as well as the framework that you're using for your backend. — SulZ, Feb 17 '20 at 21:30
@JPG This sounds like a server issue with your API. If you are trying to test locally you will need to enable CORS on your server to allow sending outside your specified domain. Example: I have a website that can only call my API from my domain, when enabling CORS I can invoke it from any domain, including localhost. It will send a preflight request which will trigger your code twice if calling a function, once with blank values, keep that in mind. — Alex, Feb 17 '20 at 23:55

Alex · Answer 1 · 2020-02-19T12:27:07.393

For testing locally you must enable CORS on your server and add the following headers to your response from server not your client:

'Access-Control-Allow-Origin': '*'

A production setup would have CORS disabled and header in response looks like this:

'Access-Control-Allow-Origin': 'https://www.google.com'

Setting the Access-Control-Allow-Origin to a specific domain and disabling CORS makes it so no one could invoke your API outside of your domain, therefore giving you the error you are getting currently.

Here is an example response from the server in JavaScript

var response = {
 "isBase64Encoded": false,
 "headers": { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*'},
 "statusCode": 200,
 "body": "{\"result\": \"Success.\"}"
 };

When CORS is enabled and you are calling out to the server from localhost for example, it will send a Preflight request https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request. In the past this has triggered duplicate code invokes on me due to my unawareness of it. It was as simple as checking null parameter values on the server side code.

I added the header like you pointed out below. Does it need to be an XMLHttpRequest? — JPG, Feb 18 '20 at 18:06
@JPG XMLHttpRequest can be used on the client code to call out to the server and retrieve data. The problem you are facing is the server is responding with incorrect headers as it's not configured for cross-domain use with CORS, and the origin policies I explained are likely unimplemented. There is tools like https://www.postman.com/ to test the endpoint and see what headers are returned from server. — Alex, Feb 19 '20 at 12:05

score -1 · Answer 2 · answered Feb 17 '20 at 21:50

-1

CORS headers should be sent FROM the backend side. See more info here. your domain from which the request comes should be in a white list (in response heasers)

answered Feb 17 '20 at 21:50

Max

582
1
4
13

How to set CORS headers to a client

2 Answers2