My expertise lies in creating API, BackEnd, and Frontend websites.
For the API, I utilize Express, while for the BackEnd - FrontEnd, I rely on ReactJs.
During local testing, everything functions as expected. However, upon deployment to the server, error messages are generated:
Access to XMLHttpRequest at 'http://domain/headline' from origin 'http://domain' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.
and
Access to XMLHttpRequest at 'http://domain/marketData/snack' from origin 'http://domain' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Within my ReactJs setup, I make use of axios for data retrieval.
Moreover, in my nginx server configuration, I have included the following settings:
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://127.0.0.1:3001;
proxy_set_header Host $http_host;
proxy_cache_bypass $http_upgrade;
proxy_redirect off;
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' 'http://domain';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
}
I am puzzled as to whether I might have overlooked something critical.