Nginx – Even after adding the directive ‘access control allow origin’ the request logs error

http-headersjavascriptnginxnode.jsrequestheader

I am trying to run nginx infront of my nodejs application (I am using windows machine)

My NodeJS Application is running in 3000 port

I have started the Nginx at 8070 port

When i try to hit http://localhost:8070/ from browser am getting the issue quoted below

This is my Nginx configuration

server {
    listen       8070;
    server_name  localhost;

location / {
    access_log   logs/access.log;
    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Headers' 'Content-Type,Accept';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';

    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_max_temp_file_size 0;
    proxy_pass http://my-app/;
    proxy_redirect off;
    proxy_read_timeout 240s;
    }
    }

But still i am getting the following error

XMLHttpRequest cannot load localhost:3000/my-app/api/engineOptions/get. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8070' is therefore not allowed access.

Am i missing anything in the nginx configuration regarding Access-Control-Allow-Origin directive?

Best Answer

The issue here is that your JavaScript is requesting a resource from localhost:3000, which is the NodeJS server, and on that request's response, there is no Access-Control-Allow-Origin response.

You should make sure that all requests your JS files make go to localhost:8070, your nginx that is. This way all responses will get the proper header.

Related Topic