ReactJS cors "The 'Access-Control-Allow-Origin' header contains multiple values"

Question

Scenario

I am using fetch to gather json from my remote apache server. In the beginning I was receiving the following CORS violation:

Access to fetch at 'http://dev.mediajackagency.com/clients/dawna/row/wordpress/wp-content/uploads/2019/01/bw.jpg' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I overcame this issue by enabling CORS in the server's .htaccess file for this project

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Credentials "true"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

Now I'm getting a different CORS violation of

Access to fetch at 'http://some.domain/some/endpoint' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values '*, http://localhost:3000', 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.

Question

How can I find where the Access-Control-Allow-Origin is getting set for localhost:3000 ? I've done a full index and search for strings related to cors, headers, etc etc with no luck. All ideas are appreciated.

Extra

Via npm start the second ACAO value is localhost:3000 but via npm build the second ACAO value is localhost so the second value appears to be dynamic and restricted to React
Adding a proxy value to package.json doesn't appear to help at all

I suggest that you go through [MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors) CORS error list and try to see what is causing your issue. — ROOT, Feb 23 '20 at 17:53
If you have access to Apache config file for your website, check if the CORS configuration is already there maybe your `.htaccess` config causing this error to be returned, same as this https://stackoverflow.com/questions/22343384/the-access-control-allow-origin-header-contains-multiple-values#answer-55027555 — ROOT, Feb 23 '20 at 18:00

score 1 · Accepted Answer · answered Mar 07 '20 at 18:30

I ultimately could not decide if CRA's dev node server was creating this issue (by adding 'localhost:3000' as an allowed origin) or if I'm just not as good with .htaccess files as I thought. Regardless here is what finally ended up working:

API server's .htaccess

# allows image files to bypass cors @jkr
<Files *.jpg>
  Header always set Access-Control-Allow-Origin "*"
  Header always set Access-Control-Allow-Credentials "true"
  Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
  Header always set Access-Control-Max-Age "1000"
  Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"
</Files>

#always allow preflight to pass @jkr
<LimitExcept OPTIONS>
  RewriteEngine On
  RewriteCond %{REQUEST_METHOD} OPTIONS
  RewriteRule ^(.*)$ $1 [R=200,L]
</LimitExcept>

ReactJS cors "The 'Access-Control-Allow-Origin' header contains multiple values"

1 Answers1