为VueJS devserver启用CORS

Question

我的设置如下所示：

• 将自定义TLD指向本地主机的自定义DNS服务器

我想要的是我的api和前端都在子域上。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知道我的浏览器将从给定的网址访问：

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;
        }
}