VUE 项目中的 CORS 问题

[honeymoose]

CORS 是有点烦人的，但还是有解决办法。

最近一个项目提示了 CORS 的问题。

前端还是后端

要解决上面的问题，需要首先知道 CORS 的问题是前端还是后端。

经过排查后，这个问题是后端 Nginx 配置的问题。

        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';


        location / {
                #add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Methods 'GET, OPTIONS';
                add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';



                proxy_pass http://localhost:8282;
                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;
        }

上面的问题是，针对 add_header Access-Control-Allow-Origin *; 的配置，我们放在了 location 里面。

如果想全站接受 CORS，需要把这个配置放到 location 外面才可以。

另外，在 VUE 前端的配置下，还需要把 https 给加上。

貌似不添加 https 的情况下会出问题。