0

I'm having a problem where by the cross origin requests from my Angular JS application work fine in Chrome but not in Firefox.

The error received in firefox is:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.domain.eu/join/joinstatus. (Reason: CORS header 'Access-Control-Allow-Origin' does not match 'https://www.domain.eu, https://www.domain.eu').

I can make requests successfully until I add an Authorization header to the request.

My server (ASP.Net Web API running on IIS) has the following headers set up:

Access-Control-Allow-Origin: https://www.domain.eu
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE
Access-Control-Allow-Headers: Authorization
Access-Control-Allow-Credentials: true

Firefox successfully pre-flights the request with an OPTIONS request. Looking through this I can see the sent Origin header is contained in the returned Access-Control-Allow-Origin header.

In fact, for some reason the returned Access-Control-Allow-Origin header has my domain name twice (despite specifying it once in config) e.g.

Access-Control-Allow-Origin: https://www.domain.eu, https://www.domain.eu

That aside what is the difference between Firefox and Chrome in this regard?

What else do I need to do so that this will work in Firefox?

UPDATE

I have noticed that if I set my headers as follows...

`Access-Control-Allow-Origin: https://www.domain.eu'

... then the pre-flight OPTIONS request works fine. The Access-Control-Allow-Origin header is the same in both the request and the response. However the actual GET request then fails with the error above.

If I modify my headers as follows:

Access-Control-Allow-Origin: https://www.domain.eu, https://www.domain.eu

... (which is what Firefox alluded to in the error), then the actual pre-flight OPTIONS request fails as this time Firefox just expects a single value of https://www.domain.eu in the header.

Remotec
  • 10,304
  • 25
  • 105
  • 147
  • What’s the value of the actual `Origin` HTTP header sent in the request? And is it different in requests sent from Firefox? That error message you cite seems to indicate the `Origin` header in the request has `https://www.domain.eu, https://www.domain.eu`, which should never really happen. The `Origin` header should be a single origin. – sideshowbarker Aug 07 '16 at 23:08

3 Answers3

0

Try:

Access-Control-Allow-Origin: https://www.domain.eu, https://domain.eu

Access-Control-Allow-Origin: https://*.domain.eu, http://*.domain.eu

Access-Control-Allow-Origin: domain.eu

Access-Control-Allow-Origin: *.domain.eu

EDIT:

Try:

Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE
Access-Control-Request-Method: GET, POST, OPTIONS, PUT, DELETE

Docs:

Access-Control-Allow-Origin

A returned resource may have one Access-Control-Allow-Origin header, with the following syntax:

Access-Control-Allow-Origin: <origin> | *

The origin parameter specifies a URI that may access the resource. The browser must enforce this. For requests without credentials, the server may specify * as a wildcard, thereby allowing any origin to access the resource.

For example, to allow http://mozilla.com to access the resource, you can specify:

Access-Control-Allow-Origin: http://mozilla.com

You must only specify a single URI or *

c py programmer
  • 62
  • 6
0

This problem was caused by essentially having the wrong combination of NuGet packages in my solution. Owin and Web API CORS had both been used causing the headers to get mixed up.

I resolved this by going back to basics and working out what packages I needed and the problem went away.

Remotec
  • 10,304
  • 25
  • 105
  • 147
  • Did you have this in other browsers or only in Mozilla? I mean if packages are the problem it would not work in any browser... I have CORS working for Chrome, but not for Mozilla and trying to figure out why. – Budda Sep 19 '21 at 20:59
0

you need to enable CORS in your web API project. Check this out!

Josue Martinez
  • 436
  • 5
  • 14