CORS: How to set 'Access-Control-Allowed-Origin' request header

Question

Response to preflight request doesn't pass access control check. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 522. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 522. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

How to add a request header to json ?

var options = {
        body: info,
        type: 'json'
    }

And then `

doGetCall(url, options = {}) {
let callOptions = {
  method: 'GET'
}
callOptions.headers = {
  'Content-Type': 'application/json',
  'Access-Control-Allow-Origin': 'http://localhost:3000'
}

return this.doCall(url, callOptions);

}

finally

doCall(url, options) {
if (!options.noauth) {
  options.headers = options.headers || {};
  options.headers.Authorization = 'Bearer ' + Account.token;
}
return fetch(url, options).then(response => response.json());

}

This does not work out. The request header has:

access-control-request-headers:access-control-allow-origin,authorization,content-type

But no Access-Control-Allowed-Origin header. How add that header?

*“The response had HTTP status code 522”* indicates a “Connection timeout” error from whatever server you’re trying to connect to. The only reason you’re seeing an error message mentioning the Access-Control-Allow-Origin response header is that the server you’re getting that response from doesn’t add any headers to 5xx error messages; most servers don’t — instead the Access-Control-Allow-Origin header is only going to show up in 2xx success responses. Anyway, the bottom line is that you need to figure out what’s causing the 522 “Connection timeout” server failure. That’s the real problem. — sideshowbarker, Sep 29 '17 at 03:09

score 1 · Accepted Answer · answered Jan 11 '19 at 09:27

Check this answer: How does CORS works

For overview:

Enable CORS options to add "Access-Control-Allow-Origin": "*" header to your response. Dont add authonticater to Options resources.
For best practice, if you add these headers to your response, you don't need to override the browser settings.

"Access-Control-Allow-Origin": "*", "Access-Control-Allow-Credentials": true

check your request url/endpoint to be sure is ok.

CORS: How to set 'Access-Control-Allowed-Origin' request header

1 Answers1