Vue前后端分离跨域踩坑

  Vue在开发环境下用webpackDevServer的proxyTable代理转发的情况下可以完美实现跨域,但打包为生产环境后发现Cookie跨域问题,之前我们一般会用axios.default.withCredentials = true加上服务端设置对应的Access-Control-Allow-Credentials响应头来解决,但是Chrome浏览器在80版本以后,默认将SameSite策略设为Lax, 即不支持跨域Cookie(火狐Firefox浏览器笔者编写时仍然支持,只是在控制台输出警告),传统方式无效,此时需要服务端设置SameSite为None,而SameSite为None又必须要在含有Secure属性的Cookie中才有效,而含有Secure属性的Cookie又必须使用Https传输,因此如果我们如果用http部署的话,无解,推荐使用nginx代理转发的方式。

示例:

    server {
        listen       80;
        server_name  localhost;
        root /Users/costerliu/VueProjects/vue_app/dist;
        index  index.html index.htm index.php;

        location / {
            try_files $uri $uri/ /index.html?$args;
        }

        location /api/ {
            proxy_pass http://127.0.0.1:8080/;
        }
    }

 

posted @ 2020-10-21 22:04  flamestudio  阅读(417)  评论(0编辑  收藏  举报