Suddenly, seemingly without changing anything in my web app, I started getting CORS errors when opening it in Chrome. I tried adding an Access-Control-Allow-Origin: *
header. Then I get this error:
XMLHttpRequest cannot load http://localhost:9091/sockjs-node/info?t= 1449187563637. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost:3010' is therefore not allowed access.
But as you can see in the following image, there is no Access-Control-Allow-Credentials
header.
WTF? Chrome bug?
My page is loaded at http://localhost:3010
and that server also uses Access-Control-Allow-Origin: *
without problems. Is there a problem if the two endpoints both use it?
In that case you can change the security policy in your Google Chrome browser to allow Access-Control-Allow-Origin. This is very simple: Create a Chrome browser shortcut. Right click short cut icon -> Properties -> Shortcut -> Target.
For a CORS request with credentials, for browsers to expose the response to the frontend JavaScript code, both the server (using the Access-Control-Allow-Credentials header) and the client (by setting the credentials mode for the XHR, Fetch, or Ajax request) must indicate that they're opting into including credentials.
Simply activate the add-on and perform the request. CORS or Cross-Origin Resource Sharing is blocked in modern browsers by default (in JavaScript APIs). Installing this add-on will allow you to unblock this feature.
"credentials flag" refers to XMLHttpRequest.withCredentials
of the request being made, not to an Access-Control-Allow-Credentials
header. That was the source of my confusion.
If the request's withCredentials
is true
, Access-Control-Allow-Origin: *
can't be used, even if there is no Access-Control-Allow-Credentials
header.
Requests withCredentials:true
, on a server configured with Access-Control-Allow-Origin: *
CAN be used, but you will need some more extra config on your server:
Using Access-Control-Allow-Origin=*
on the server, it will not allow access to any resource (that requires credentials) on any xhr CORS request.
Workarounds:
xhr.withCredentials = false
)Access-Control-Allow-Origin=*
to the request's origin. You can
also apply this rewrite under certain criteria, for example, if
request is using certain port or it comes from a list of whitelisted
domains.Here is some article that explains how to do this on a IIS server, but you can do this in many other servers:
PS: in case of using credentials, you will also need the following header on your server's response: Access-Control-Allow-Credentials=true
PS2: only 1 value is allowed to "access-control-allow-origin" paramenter. If you try to use for instance two domains: domain1.com domain2.com, it won't work.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With