20

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.

enter image description here

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?

Andy
  • 7,885
  • 5
  • 55
  • 61

3 Answers3

35

"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.

Andy
  • 7,885
  • 5
  • 55
  • 61
  • 1
    Yes When making an AJAX call with the parameter withCredentials: true, the response header should have the Access-Control-Allow-Credentials = true. Consequently, this headers does not allow for the use of Access-Control-Allow-Origin=* For more information, on the withCredential parameter and the response header look at this article: http://www.ozkary.com/2015/12/api-oauth-token-access-control-allow-credentials.html – ozkary Jan 07 '16 at 19:36
  • 1
    Same here, thought the error message was referring to the header. Wasn't aware of the `withCredentials` flag. Weird. – BastiBen May 19 '16 at 07:20
  • I filed a chrome bug about the message being confusing and if I remember correctly they took it seriously – Andy May 19 '16 at 18:14
  • 1
    This is [the bug](https://bugs.chromium.org/p/chromium/issues/detail?id=566239#c8) and I still see the confusing message. I've raised the issue internally. – Dan Dascalescu Sep 30 '16 at 00:21
  • @DanDascalescu cool, thanks! it looks like they're waiting for your response on that thread – Andy Feb 17 '17 at 17:36
  • there's a way to succesfully do a CORS request with credentials and access-control-allow-origin=* Please read my comment – Alberto S. Sep 06 '17 at 15:30
  • @Andy so your answers explains the problem but does not say how to actually solve the issue. Would you please have more insight on that? thanks – Alexis.Rolland May 26 '19 at 10:09
  • I am also face same issue in this call a other server file using ajax but after ajax calling its give same error I have already added the all require headers in response will we add any heder in calling page also? – Priyanka Sankhala Jun 18 '19 at 18:10
9

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:

  1. Make that remote resource on the server accesible without credentials ( and use xhr.withCredentials = false )
  2. Create a rewrite rule on the server, to modify the response header 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.

Alberto S.
  • 1,805
  • 23
  • 39
0

I solved same problem by using these steps..

1) disable your chrome extension "Allow-Control-Allow-Origin"

2) add these into your service

var xhr = new (); xhr.withCredentials = true;

Jayani Sumudini
  • 1,409
  • 2
  • 22
  • 29
  • 1
    " the servlet " ? (I'm still new-ish to front-end web dev, so I have no idea what that is in this context.) Thanks. – Scott Fraley Feb 08 '17 at 19:45
  • mistake.not " the servlet "..it's your service – Jayani Sumudini Feb 14 '17 at 09:44
  • 1
    thanks , worked for me just after disabling chrome extension "Allow-Control-Allow-Origin) – Mawardy Mar 12 '17 at 17:11
  • 1
    Same solution worked for me after disabling chrome extension. – newari Aug 10 '17 at 07:30
  • 2
    this won't help for production, you can't tell users to disable such extension – Alberto S. Sep 01 '17 at 09:16
  • 2
    @Alberto, you can tell because this extension is a developer tool. Each developer needs to know his environment. You are focusing on your software development, not on developer's environments. The end users will not see this error, but the developers who have this extension YES. My humble opinion. – Orleando Dassi Sep 06 '17 at 12:18
  • 1
    Not exactly. "credentials flag" refers to XMLHttpRequest.withCredentials of the request being made, not to an Access-Control-Allow-Credentials header. If you are using * for Allow-origin, you wont be able to send any credentials along your request. The mentioned solution will only work for testing a development. – Alberto S. Sep 06 '17 at 15:13