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.
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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With