Nuxt•2mo ago

Nuxt socket.io CORS error

Hi, if I have a nuxt application behind a reverse proxy (nginx), should I set up CORS only in nginx or also in nuxt?

18 Replies

im running an app behind reverse proxy as well, i dont remember setting anything specifically for cors

Rush•2mo ago

you must have set something up, although maybe not cors cors is needed if you want to access the server from a different address than the one where nuxt is running

Archerist•2mo ago

https://enable-cors.org/server_nginx.html

enable cross-origin resource sharing

CORS support site

Archerist•2mo ago

i found this as an example

Rush•2mo ago

i found that too, but it doesnt answer my question

Archerist•2mo ago

oh yea just nginx should be fine

Rush•2mo ago

But normally it would be necessary to configure the allowed origins in nuxt. Why doesn't it have to be done there if it is previously in nginx?

Archerist•2mo ago

i mean it doesnt matter as long as you set the headers, if you set them in nuxt nginx will forward it straight, if you set them in nginx it will just add the headers to the response. output is gonna be the same, i think

Rush•2mo ago

if i set them in nuxt, it doesnt work because nginx is blocking it nginx.conf:

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    server_name _;

    deny all;
}

server {
    listen 80;
    listen [::]:80;

    # cloudflare ips
    allow 103.21.244.0/22;
    allow 103.22.200.0/22;
    allow 103.31.4.0/22;
    allow 104.16.0.0/13;
    allow 104.24.0.0/14;
    allow 108.162.192.0/18;
    allow 131.0.72.0/22;
    allow 141.101.64.0/18;
    allow 162.158.0.0/15;
    allow 172.64.0.0/13;
    allow 173.245.48.0/20;
    allow 188.114.96.0/20;
    allow 190.93.240.0/20;
    allow 197.234.240.0/22;
    allow 198.41.128.0/17;

    server_name my-domain.com;

    location / {
        proxy_pass http://my-app-1:3000;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        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 https;
        proxy_set_header X-Forwarded-Uri $request_uri;
        proxy_set_header X-Forwarded-Host $host;
    }
}

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    server_name _;

    deny all;
}

server {
    listen 80;
    listen [::]:80;

    # cloudflare ips
    allow 103.21.244.0/22;
    allow 103.22.200.0/22;
    allow 103.31.4.0/22;
    allow 104.16.0.0/13;
    allow 104.24.0.0/14;
    allow 108.162.192.0/18;
    allow 131.0.72.0/22;
    allow 141.101.64.0/18;
    allow 162.158.0.0/15;
    allow 172.64.0.0/13;
    allow 173.245.48.0/20;
    allow 188.114.96.0/20;
    allow 190.93.240.0/20;
    allow 197.234.240.0/22;
    allow 198.41.128.0/17;

    server_name my-domain.com;

    location / {
        proxy_pass http://my-app-1:3000;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        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 https;
        proxy_set_header X-Forwarded-Uri $request_uri;
        proxy_set_header X-Forwarded-Host $host;
    }
}

do i need to setup it somehow to allow nginx to forward the nuxt cors headers?

Archerist•2mo ago

well you are not sending your nginx conf or any code, so all i can do is guess oh nvm you mean the whole request or just the headers?

Rush•2mo ago

i mean that i get the cors origin error in console when trying to connect to websocket with configured cors origin in nuxt

Archerist•2mo ago

well you are gonna get the cors error if the clients get 4xx/5xx responses as well

Rush•2mo ago

its this error in console from origin 'http://localhost:3000/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Archerist•2mo ago

check the network tab

Rush•2mo ago

for what should i look there?

Gaming

Programming

Nuxt socket.io CORS error