CORS doesn't work despite headers set

I have an app where the client makes a multipart request from example.com to api.example.com through https with Nginx, then api uploads the file to Amazon S3.

It works on my machine but breaks when other people try it on a different network. Giving me this error:

[Error] Origin https://example.com is not allowed by Access-Control-Allow-Origin. [Error] Failed to load resource: Origin https://example.com is not allowed by Access-Control-Allow-Origin. (graphql, line 0) [Error] Fetch API cannot load https://api.example.com/graphql. Origin https://example.com is not allowed by Access-Control-Allow-Origin. 

I'm using the cors npm package on the API like this:

app.use(cors()); 

All of this is going through an Nginx reverse proxy on DigitalOcean. Here this is my Nginx config:

Individual server configs at /etc/nginx/conf.d/example.com.conf and /etc/nginx/conf.d/api.example.com.conf, almost identical, just the addresses and names different:

 server {         listen 443 ssl http2;         listen [::]:443 ssl http2;         server_name example.com;          ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;         ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;          include snippets/ssl-params.conf;          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://localhost:3000/;             proxy_ssl_session_reuse off;             proxy_set_header Host $http_host;             proxy_cache_bypass $http_upgrade;             proxy_redirect off;         }     } 

It works perfectly fine when I use it on localhost on my computer but as soon as I put it on DigitalOcean I can't upload. And it only breaks on this multipart request when I'm uploading a file, other regular cors GET and POST requests work.

2 Answers

Answers 1

The problem turned out to be Nginx not accepting large files. Placing this in the location block of my nginx server config solved my issue: client_max_body_size 10M;

Answers 2

Issue is probably not with nginx since it's only a mobile issue. Try Using, instead of * for Access-Control-Allow-Origin you can use your origin as well.

app.use(function(req, res, next) {     res.header("Access-Control-Allow-Origin", "*");     res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");     res.header("Authorization", "Access-Control-Allow-Headers", "Origin","X-Requested-With", "Content-Type", "Accept");     next(); }); 

UPDATE

Try following if above does not work, this enables everything for the time being.

app.use(cors()); 

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati