为 VueJS 开发服务器启用 CORS

Question

我的设置如下：

自定义 DNS 服务器将自定义 TLD 指向本地主机
nginx 作为反向代理
golang 后端
VueJS 前端通过 vue-cli

我想要的是让我的 api 和我的前端都在 sub.domain.tld 上，其中 /api 反向代理到我的 API 和其他一切到我的 vuejs 开发服务器。

我当前的 nginx 配置正在满足我的需要，但它阻止了 vue devserver 连接：

server {
        listen      80;
        server_name sub.domain.tld;
        return 301 https://$server_name$request_uri;
}

server {
        listen 443 ssl http2;
        server_name sub.domain.tld;

        ssl_certificate /opt/ssl/domain.tld.pem;
        ssl_certificate_key /opt/ssl/domain.tld-key.pem;

        include snippets/ssl.conf;

        access_log /tmp/nginx.log combined;

        add_header 'Access-Control-Allow-Origin' "*" always;
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,X-Refresh-Token';

        location /auth {
                if ($request_method = OPTIONS ) {
                        add_header "Access-Control-Allow-Origin"  "*" always;
                        add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD";
                        add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept, X-Refresh-Token";
                        return 200;
                }

                proxy_pass http://localhost:2394;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
        }

        location / {
                if ($request_method = OPTIONS ) {
                        add_header "Access-Control-Allow-Origin"  "*" always;
                        add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD";
                        add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept, X-Refresh-Token";
                        return 200;
                }

                proxy_pass http://localhost:8935;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
        }
}

和 vue.config.js:

module.exports = {
        devServer: {
                disableHostCheck: true,
                proxy: 'https://sub.domain.tld/'
        }
}

唯一的问题是我仍然收到错误，我猜是 vue-cli 中包含的实时错误显示/实时刷新（法语，抱歉，但它基本上是 CORS 错误消息）：

Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur https://192.168.1.12:8935/sockjs-node/info?t=1609950092054. Raison : échec de la requête CORS.

Answer 1

所以最后我使用以下设置让它工作：

我让 vue-cli / webpack 知道我的浏览器将从给定的 url:

访问

vue.config.js

module.exports = {
  publicPath: '/app/', // Only required if the app is not at the root
  devServer: {
    "public": "sub.domain.tld"
  }
}

那么简单的就是正确配置nginx的情况。在这种情况下不需要 CORS，因为一切都来自同一个域。

server {
        listen      80;
        server_name sub.domain.tld;
        return 301 https://$server_name$request_uri;
}

server {
        listen 443 ssl http2;
        server_name sub.domain.tld;

        ssl_certificate /opt/ssl/domain.tld.pem;
        ssl_certificate_key /opt/ssl/domain.tld-key.pem;

        include snippets/ssl.conf;

        access_log /tmp/nginx.log combined;

        # My golang backend
        location / {
            proxy_pass http://localhost:1635;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
            proxy_set_header Host $host;
        }

        # My VueJS app
        location /app {
            proxy_pass http://localhost:8080;
        }

        # Access for webpack WS for debug
        location /sockjs-node {
            proxy_pass http://localhost:8080;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
            proxy_set_header Host $host;
        }

        # Since I'm building my app on a sub-path I want the root to redirect to it
        location = / {
            return 301 $scheme://$host/app;
        }
}

为 VueJS 开发服务器启用 CORS

Enabling CORS for VueJS devserver

nginx

devserver

webpack

vue.js

vue-cli