enable CORS headers

[ashkaptsov]

can not find a right way to add to nginx config: add_header 'Access-Control-Allow-Origin' '*';

get always an error: The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:8080, *', but only one is allowed.

any ideas?

[githubsaturn]

You better add this kind of headers in your application code rather than nginx.

[ashkaptsov]

Unfortunately can not do it as the request is provided from the app that I can't control. I need to have it in my nginx.
that's my nginx:

/etc/nginx/nginx.conf
user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


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

    geo $remote_addr $ip_in_log {

        # CIDR Range IPs:
        172.16.0.0/12 0;
        10.0.0.0/8 0;
        192.168.0.0/16	0;
        
        default 1;
        
    }

    log_format  main  '$remote_addr - $remote_user [$time_local] "$host" "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main if=$ip_in_log;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    server_names_hash_bucket_size 128;

    ssl_session_cache   shared:SSL:20m;
    ssl_session_timeout 1d;
    ssl_session_tickets off;

    # Mozilla Intermediate configuration. tweak to your needs.
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
    ssl_prefer_server_ciphers off;

    
    <%
        if (base.dhparamsFilePath) {
    %>
        ssl_dhparam <%-base.dhparamsFilePath%>;
    <%
        }
    %>

    # Don't emit NGINX version on error pages and in the “Server” response header field.
    server_tokens off;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

this is /etc/nginx/conf.d/captain-root.conf

# Default catch-all page. e.g. if you enter SOME-RANDOM-CHARS.captainroot.domain.com
    server {

        # Catch all HTTP
        listen       80;

        # Catch all HTTPS
        listen              443 ssl;
        ssl_certificate     <%-fake.crtPath%>;
        ssl_certificate_key <%-fake.keyPath%>;

        server_name  _;

        location /nginx_status {
            stub_status on;

            access_log off;

            # This can be improved by adding authentication as well.
            # CIDR Range IPs:
            allow 172.16.0.0/12;
            allow 10.0.0.0/8;
            allow 192.168.0.0/16;
            
            deny all;
        }

        location / {
            root   <%-captain.defaultHtmlDir%>;
            index  index.html index.htm;
        }

        error_page 404 /index.html;
        error_page 500 502 503 504 /error_generic_catch_all.html;
    }


# Captain dashboard at captain.captainroot.domain.com
    server {

        listen       80;
        client_max_body_size 300m;

    <%
        if (captain.hasRootSsl) {
    %>
        listen              443 ssl;
        ssl_certificate     <%-captain.crtPath%>;
        ssl_certificate_key <%-captain.keyPath%>;

    <%
        }
    %>

        server_name  <%-captain.domain%>;

        # 127.0.0.11 is DNS set up by Docker, see:
        # https://docs.docker.com/engine/userguide/networking/configure-dns/
        # https://github.com/moby/moby/issues/20026
        resolver 127.0.0.11 valid=10s;
        set $upstream http://<%-captain.serviceName%>:<%-captain.serviceExposedPort%>;

        # IMPORTANT!! Except proxy_read_timeout, this block should be same as location /api/v2/user/apps/appData
        location / {
            proxy_pass $upstream;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

        # temporary until build process becomes an asynchronous process
        location /api/v2/user/apps/appData {
            proxy_pass $upstream;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;

            proxy_read_timeout 120s;
        }

        # Used by Lets Encrypt
        location /.well-known/acme-challenge/ {
            root <%-captain.staticWebRoot%>;
        }
        
        # Used by CapRover for health check
        location /.well-known/captain-identifier {
            root <%-captain.staticWebRoot%>;
        }
    }



# Built-in Docker Registry at registry.captainroot.domain.com
# Port 80/443 is used by Let's Encrypt to support HTTPS
# But the Registry engine runs on port 996
    server {

        listen       80;
        client_max_body_size 500m;

    <%
        if (registry.hasRootSsl) {
    %>
        listen              443 ssl;
        ssl_certificate     <%-registry.crtPath%>;
        ssl_certificate_key <%-registry.keyPath%>;
    <%
        }
    %>

        server_name  <%-registry.domain%>;

        location / {
            root <%-registry.staticWebRoot%>;
        }
    }

Where should I put header add_header 'Access-Control-Allow-Origin' '*'; and what should I delete to don't have http://localhost:8080 ?

[githubsaturn]

Neither of the two you shared above. Go to your app => HTTP tab => Edit nginx config, and insert add_header above proxy_pass

[ashkaptsov]

thanx for reply, I tried to put it like you said, unfortunately I get the same problem:

[githubsaturn]

I just tried adding a random header and it's working just fine. So CapRover is doing its job and it passes the content to nginx

You can try confirming this by running this on your local machine

curl -I http://demo-php.server.demo.caprover.com/

You can view the edited nginx confirm on the demo instance:

• https://captain.server.demo.caprover.com password: captain42
• app: php-demo

[ashkaptsov]

Thanx, also for me it works. I found a solution, I just had to put the header to the response body for the request I was doing, beside having it in nginx header, by doing this I avoid having http://localhost:8080 in the header of the response. Thank you for your help! All the best

[RenanZX]

How can i solve this problem? I inserted all cors policy opened in my node application:

node server

import cors from 'cors';
app.use(cors());

app.use(function (req: Request, res: Response, next: NextFunction) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Credentials', 'true');
  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PATCH,PUT,DELETE,OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Accept,  X-Auth-Token, Origin, X-Requested-With, Access-Control-Allow-Headers, Access-Control-Allow-Origin, Access-Control-Allow-Methods');
  next();
});

reactjs call:

try{
      await axios({
        method: 'POST',
        url: `${webs}/atualiza-jornada`,
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Content-Type': 'application/json',
        },
        withCredentials: true,
        data: this.info
      })
    }catch(e){
      console.log('erro atualizacao');
    }

curl -I https://doc-server-prod.bpo.digital-test.uk command:

HTTP/2 200 
server: nginx
date: Tue, 06 Sep 2022 13:56:44 GMT
content-type: text/html; charset=utf-8
content-length: 18
x-powered-by: Express
access-control-allow-origin: *
access-control-allow-credentials: true
access-control-allow-methods: GET,POST,PATCH,PUT,DELETE,OPTIONS
access-control-allow-headers: Content-Type, Accept,  X-Auth-Token, Origin, X-Requested-With, Access-Control-Allow-Headers, Access-Control-Allow-Origin, Access-Control-Allow-Methods
etag: W/"12-zNsp423GZzL8lvQl+H8JIQXSWQE"

[RenanZX]

Solved my problem changing the port of my server in caprover panel to 80.

[rmnegatives]

In my case I had to change my port from 80 to 4000 which matched the docker port.
Thank you so much, I lost so much time on this.
I just used cors in express but I could not figure out why the config would work locally but not on cap rover