javascript - CORS doesn't work despite headers set - Stack Overflow

admin管理员组

文章数量:1395014

I have an app where the client makes a multipart request from example to api.example 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  is not allowed by Access-Control-Allow-Origin.
[Error] Failed to load resource: Origin  is not allowed by Access-Control-Allow-Origin. (graphql, line 0)
[Error] Fetch API cannot load . Origin  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.conf and /etc/nginx/conf.d/api.example.conf, almost identical, just the addresses and names different:

 server {
        listen 443 ssl http2;
        listen [::]:443 ssl http2;
        server_name example;

        ssl_certificate /etc/letsencrypt/live/example/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/example/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 puter 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.

I have an app where the client makes a multipart request from example. to api.example. 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. is not allowed by Access-Control-Allow-Origin.
[Error] Failed to load resource: Origin https://example. is not allowed by Access-Control-Allow-Origin. (graphql, line 0)
[Error] Fetch API cannot load https://api.example./graphql. Origin https://example. 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..conf and /etc/nginx/conf.d/api.example..conf, almost identical, just the addresses and names different:

 server {
        listen 443 ssl http2;
        listen [::]:443 ssl http2;
        server_name example.;

        ssl_certificate /etc/letsencrypt/live/example./fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/example./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 puter 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.

• javascript
• node.js
• nginx
• cors

Share Improve this question Follow edited May 12, 2017 at 22:15 Vlady Veselinov asked May 2, 2017 at 3:36 Vlady VeselinovVlady Veselinov 5,43155 gold badges2828 silver badges5050 bronze badges 1

• First thoughts: Are you using https in both cases? Are you logged-in or out the same way in both cases? – colllin Commented May 3, 2017 at 14:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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;

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());

本文标签： javascriptCORS doesn39t work despite headers setStack Overflow