node.js – Probleme mit der domänenübergreifenden CORS-Konfiguration in Nginx

Question

Ich habe kürzlich an einem Vue-Projekt gearbeitet und wollte es auf meinem eigenen Cloud-Server platzieren. Knoten und Nginx wurden jedoch installiert, nachdem ich das gepackte Projekt über den Nginx-Proxy geleitet hatte. Domain-Anfragen können nicht gestellt werden, daher habe ich viele Codes ausprobiert, aber ohne Erfolg, ich hoffe, jemand kann mir helfen, einen Blick darauf zu werfen.

nginx.conf ist wie folgt konfiguriert:

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  maxutian.cn www.maxutian.cn;
        root         /root/hexo/public;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
    }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

    server {
        listen       80;
        server_name  music.maxutian.cn;
        root         /root/dist;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
    
    
        location / {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
    }
        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

Da es mehr als ein Vue-Projekt auf dem Server gibt, wird ein Domänenname der zweiten Ebene eingerichtet und zwei Server geschrieben. Der erste Server ist mein Blog und der zweite Server ist das Vue-Projekt. Gibt es ein Problem mit meiner Konfiguration?

Answer 1

楼主需要先了解一下什么是CORS，推荐先看看以下这文章

HTTP访问控制（CORS）

Answer 2

参考我写的知乎专栏文章：

https://zhuanlan.zhihu.com/p/...

划重点—— add_header 要加 always：

add_header Access-Control-Allow-Origin * always;

Answer 3

可以使用nginx代理转发来实现跨域

server {
    listen  80;
    server_name 127.0.0.1;

    location ~ /api/ {
        proxy_pass  http://127.0.0.1:8081;
        proxy_set_header Host $host:80;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

将http://127.0.0.1/api/请求转发到http://127.0.0.1:8081