Nginx + MEAN Stack CORS issue

[KevinTYJ]

Hope everyone is having a good new years and CES 2019,

 

I literally reset the node server and reconfigured nginx and I dont remember how I fixed CORS issues...

I checked stackvoerflow, but none of the recommendations helped.

 

Im having a CORS preflight issue because of a header I believe :

Access to XMLHttpRequest at 'https://api.keoplus.com/api/auth/signin' from origin 'https://keoplus.com' has been blocked by CORS policy: Request header field deviceinfo is not allowed by Access-Control-Allow-Headers in preflight response.

 

Nginx Config :

upstream (hidden IP){ 
  server 127.0.0.1:8000; #Your local node.js process
}
# the nginx server instance
server {
  listen 80;
  listen [::]:80;
  server_name api.keoplus.com;
  return 301 https://$server_name$request_uri;
  access_log /var/log/nginx/api.log;
}

 

Node Application Nginx :

 location / {
    add_header 'Access-Control-Allow-Origin' 'https://keoplus.com';
    add_header 'Access-Control-Allow_Credentials' 'true';
    add_header 'Access-Control-Allow-Headers' 'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers';
    add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';

    if ($request_method = 'OPTIONS') {
      add_header 'Access-Control-Allow-Origin' 'https://keoplus.com';
      add_header 'Access-Control-Allow_Credentials' 'true';
      add_header 'Access-Control-Allow-Headers' 'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers';
      add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
      add_header 'Access-Control-Max-Age' 1728000;
      add_header 'Content-Type' 'text/plain charset=UTF-8';
      add_header 'Content-Length' 0;
      return 204;
    }

    proxy_redirect off;
    proxy_set_header host $host;
    proxy_set_header X-real-ip $remote_addr;
    proxy_set_header X-forward-for $proxy_add_x_forwarded_for;
    proxy_pass https://api.keoplus.com:8000;
  }

 

Has anyone experienced the same issue, and if-so how did ya'll fix this?

 

Very much Thanks!

[colonel_mortis]

It looks like you're trying to access the deviceinfo header from javascript, so you need to add deviceinfo to the Access-Control-Allow-Headers header. In both places that you have it within your nginx config, it should be

add_header 'Access-Control-Allow-Headers' 'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, deviceinfo';

I'm not sure why you would need most of the headers that you currently have in ACAH (origin, accept and x-requested-with are request headers, so aren't affected by CORS, content-type is allowed for CORS requests by default I believe, and the other access-control headers are unlikely to be read by your application), so you might want to remove the rest of them to just leave deviceinfo. They aren't doing any harm by being there though.