Cors issues locally between localhost:3008 to localhost:3000 newb issues

Hey All,

So, a little background. (***It is port 3005***, not 3008)

I have a front end that is running on **port** **3005**, using Next.js

I have a ruby/rails backend that is on port **3000** (very OLD code, like 2.+ or similiar rails/ruby code).

**Note:** Also, I have another seperate Front End application that runs on "localhost" and THAT works fine.

Is there a way to allow for the ruby/rails application to accept ALL requests from localhost or localhost:\* (no matter the port)?

Most of my "/api/....." are returning cors issues. ala

Method: GET
credentials: include = Fails
credentials: omit = Succeeds
http://localhost:3005/api/products/:id

Method: DELETE
credentials: include = Fails
credentials: omit = Fails
http://localhost:3005/api/user/logout

\---------------------

I had my credentials set at "include", when I did that ALL api's got cors issues. When I set it to "omit", they worked except for 'POST and DELETE', those still have cors issues.

Here is the Rails (local/development nginx). This is a template that builds the nginx.conf file in /usr/local/etc/nginx/nginx.conf

worker_processes 1;

# e.g. /usr/local/openresty/nginx/logs/error.log;
error_log {{log_directory}}/error.log;

events {
worker_connections 1024;
}

http {
include mime.types;
default_type application/octet-stream;

sendfile on;

keepalive_timeout 120;

proxy_read_timeout 120s;

client_max_body_size 5m;

server {
listen 80;
server_name localhost localhost.*;

#charset koi8-r;

# e.g. /usr/local/openresty/nginx/logs/access.log;
access_log {{log_directory}}/access.log;
root {{main.directory}}/public;

{{services}}

location / {
{{cors}}
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://127.0.0.1:{{main.port}};
}

error_page 500 503 504 /500.html;
error_page 502 /502.html?uri=$uri;
location = /50x.html {
root html;
}
}
{{servers}}
# begin-ssl
server {
listen 443 ssl; # http2 (module required)
server_name localhost localhost.*;

ssl_certificate {{ssl_certificate}};
ssl_certificate_key {{ssl_certificate_key}};

ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;

ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers AESGCM:HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;

root {{main.directory}}/public;

{{services}}

location / {
{{cors}}
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://127.0.0.1:{{main.port}};
}

error_page 500 502 503 504 /500.html;
location = /50x.html {
root html;
}
}
# end-ssl
include servers/*;
}

I'm guessing its the server part and specifically declaring port 80 (localhost).Can we do multiple port ranges?

Here is what that above template spits out.

worker_processes 1;

# e.g. /usr/local/openresty/nginx/logs/error.log;
error_log /usr/local/var/log/nginx/error.log;

events {
worker_connections 1024;
}

http {
include mime.types;
default_type application/octet-stream;

sendfile on;

keepalive_timeout 120;

proxy_read_timeout 120s;

client_max_body_size 5m;

server {
listen 80;
server_name localhost localhost.*;

#charset koi8-r;

# e.g. /usr/local/openresty/nginx/logs/access.log;
access_log /usr/local/var/log/nginx/access.log;

root /Users/myname-site/Desktop/applications/mySite/public;

location = /service/auth {
proxy_pass http://127.0.0.1:3002;
rewrite ^/service/auth / break;
}

location /service/auth {

# cors
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, PATCH';
#
# Custom headers and headers various browsers *should* be OK with but aren't
#
add_header 'Access-Control-Allow-Headers' 'Auth-Token,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Ajs-Anonymous-Id';
#
# Tell client that this pre-flight info is valid for 20 days
#
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, PATCH';
add_header 'Access-Control-Allow-Headers' 'Auth-Token,Accept,AuthorizationDNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Ajs-Anonymous-Id' always;
add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';

proxy_pass http://127.0.0.1:3002;
rewrite ^/service/auth(.*)$ $1 break;
}

location = / {

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://127.0.0.1:3006;
}

location = /mysite-health {

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://127.0.0.1:3006;
}

location / {
# cors
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, PATCH';
#
# Custom headers and headers various browsers *should* be OK with but aren't
#
add_header 'Access-Control-Allow-Headers' 'Auth-Token,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Ajs-Anonymous-Id';
#
# Tell client that this pre-flight info is valid for 20 days
#
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, PATCH';
add_header 'Access-Control-Allow-Headers' 'Auth-Token,Accept,AuthorizationDNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Ajs-Anonymous-Id' always;
add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://127.0.0.1:3000;
}

error_page 500 503 504 /500.html;
error_page 502 /502.html?uri=$uri;
location = /50x.html {
root html;
}
}

server {
listen 80;
server_name partners.oursite.com;

# e.g. /usr/local/openresty/nginx/logs/access.log;
access_log /usr/local/var/log/nginx/access.log;

location / {

# make hwebpack hot reloading work
proxy_set_header Connection '';
proxy_http_version 1.1;
chunked_transfer_encoding off;
proxy_buffering off;
proxy_cache off;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://127.0.0.1:3008;
}
}

1 thought on “Cors issues locally between localhost:3008 to localhost:3000 newb issues”

  1. What is the exact cors error you get?

    Could you make a screenshot how the response including headers looks when the browser received the response to the options request?

    Reply

Leave a Comment