cors 请求获取反应

Question

Ok, so odd error. I have a react app that gets data via a fetch function

fetch('https://port.abendago.com/index.php?controller=departments&route=getAll')

the app is located on a firebase server so a different domain etc...

https://vanport-debba.web.app/

Now, in the console, I see the request go out, and the server responds. If I view the response, I see the data (json data) in the response. BUT, the console still gives a CORS error and my app doesn't do anything with the data.

On the server I've added all the various CORS headers (which you can see in the response headers on the above URLS). My server team says I need to change something on my react server? or the react app? I've been trying all sorts of stuff and nothing is working.

The webserver (end point server) is running plesk and apache and nginx

Answer 1

The reason might still be server related. I tried cors requesting to the above url and got response headers as these:

Access-Control-Allow-Origin: '*'
Access-Control-Allow-Origin: 'https://vanport-debba.web.app/'
Access-Control-Allow-Origin: 'https://vanport-debba.web.app'
Access-Control-Allow-Origin: https://vanport-debba.web.app/
Access-Control-Allow-Origin: https://vanport-debba.web.app
Access-Control-Allow-Origin: *

As you can see, it's sending multiple response headers for Access-Control-Allow-Origin which is precisely what the cors error that I got had:

Access to fetch at ' http://port.abendago.com/index.php?controller=departments&route=getAll ' from origin ' http://localhost:3000 ' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values ' http://localhost:3000 , '*', ' https://vanport-debba.web.app/ ', ' https://vanport-debba.web.app ', https://vanport-debba.web.app/ , https://vanport-debba.web.app , *', but only one is allowed. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

ie

The 'Access-Control-Allow-Origin' header contains multiple values

Have the server send the header with a valid value

If you look at the Mozilla developer docs , its mentioned

More than one Access-Control-Allow-Origin header was sent by the server. This isn't allowed.

Have your server team revisit this and take a look at the cors configuration. It should simply return Access-Control-Allow-Origin: *