Nginx and Cors issue with API requests on localhost:3005

I am trying to get a new front end app working with an existing rails back end. Everything is great until I spun up a “new” front end app on localhost:3005, using the same rails backend. Mind you, the original front end app is on localhost, and that is fine.

All my apis which hit “localhost/api/….” give cors issues. So, my new app on “localhost:3005” is hitting rails apis on “localhost/api…”.

How can I also have this secondary localhost:3005 front end app, using credentials:include, to work just like localhost does?

I am a very newbish nginx person. I thought I could just add another:

  server {
    listen       80;
    server_name  localhost:3005;

But that just spun the page, never loaded….
Shouldn’t there be a setting where I allow all localhost:* to use my backend?

Any ideas?

Here is my nginx.conf


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';
        #
        # 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' 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';
        #
        # 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' 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  associates.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;
    }