How do I enable CORS on Ubuntu 20.04 with nginx?

Question

Hello!

I am having a thus far unsurmountable issue with enabling my website, hosted at /var/www/html/, from sending a json object via an ajax post request through a hmtl file to a plumber api I have listening at droplet-ip:3000/myApi. I have configured my plumber api config file in etc/nginx/sites-available/ as follows:

location /myApi/ { 
  proxy_pass http://localhost:3000/; 
  proxy_http_version 1.1; 
  proxy_set_header Upgrade $http_upgrade; 
  proxy_set_header Connection 'upgrade'; 
  proxy_set_header Host $host; 
  proxy_cache_bypass $http_upgrade; 
  add_header 'Access-Control-Allow-Origin' '*'; 
  add_header 'Access-Control-Allow-Credentials' 'true'; 
  add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS'; 
  add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
}

I have my plumber.R file configured with

"Access-Control-Allow-Origin", "*"

And I have a firewall enabled for this droplet with port 8000 and 3000 tcp and udp access.

The error I am still receiving is:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://droplet-ip:3000/myApi. (Reason: CORS request did not succeed). Status code: (null).

Any help here is so very much appreciated! Cheers.

KFSys · Answer

Hi @friendlylightseagreeneel , I’ve read a bit more on the subject of passing some values to a reverse proxy API. A few times I’ve seen the following examples: if ( $request_method !~ ^(GET|POST|HEAD|OPTIONS|PUT|PATCH|DELETE)$ ) { return 444; } set $origin $http_origin; if ($origin !~ '^https?://(subdom1|subdom2)\.yourdom\.zone$') { set $origin 'https://default.yourdom.zone'; } if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' "$origin" always; add_header 'Access-Control-Allow-Methods' 'GET, POST, PATCH, PUT, DELETE, OPTIONS' always; add_header 'Access-Control-Allow-Headers' 'Content-Type, Accept, Authorization' always; add_header 'Access-Control-Allow-Credentials' 'true' always; add_header Access-Control-Max-Age 1728000; add_header Content-Type 'text/plain charset=UTF-8'; add_header Content-Length 0; return 204; } if ($request_method ~ '(GET|POST|PATCH|PUT|DELETE)') { add_header Access-Control-Allow-Origin "$origin" always; add_header Access-Control-Allow-Methods 'GET, POST, PATCH, PUT, DELETE, OPTIONS' always; add_header Access-Control-Allow-Headers 'Content-Type, Accept, Authorization' always; add_header Access-Control-Allow-Credentials true always; } Of course this includes all the necessary options needed. What you can use is : if ($request_method ~ '(GET|POST|PATCH|PUT|DELETE)') { add_header Access-Control-Allow-Origin "$origin" always; add_header Access-Control-Allow-Methods 'GET, POST, PATCH, PUT, DELETE, OPTIONS' always; add_header Access-Control-Allow-Headers 'Content-Type, Accept, Authorization' always; add_header Access-Control-Allow-Credentials true always; } An alternative would be: set $cors_origin ""; set $cors_cred ""; set $cors_header ""; set $cors_method ""; if ($http_origin ~ '^https?://(localhost|mywebsite\.com)$') { set $cors_origin $http_origin; set $cors_cred true; set $cors_header $http_access_control_request_headers; set $cors_method $http_access_control_request_method; } add_header Access-Control-Allow-Origin $cors_origin; add_header Access-Control-Allow-Credentials $cors_cred; add_header Access-Control-Allow-Headers $cors_header; add_header Access-Control-Allow-Methods $cors_method; location /myApi/ { proxy_pass http://localhost:3000/; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } Hope that helps!

Question

How do I enable CORS on Ubuntu 20.04 with nginx?

Try DigitalOcean for free

Popular Topics

Get our biweekly newsletter

Hollie's Hub for Good

Become a contributor

Featured on Community

DigitalOcean Products

Welcome to the developer cloud