简单设置，解决使用webpack前后端跨域发送cookie的问题

偏执的太偏执、 2022-09-25 14:23 252阅读 0赞

最近用vue来做项目，用webpack来做前端自动化构建。webpack-dev-server会在本地搭建一个服务器，在和后端调试的时候，就会涉及到跨域的问题。

刚开始时，没有用vue-cli来构建项目，而是参考了github上的[vue-vueRouter-webpack][]来构建。看网上的资料，vue-cli可以通过配置代理来解决跨域的问题：

proxyTable: {
      '/list': {
        target: 'http://api.xxxxxxxx.com',
        changeOrigin: true,
        pathRewrite: {
          '^/list': '/list'
        }
      }
    }

具体可以看这篇文章：[Vue-cli proxyTable 解决开发环境的跨域问题][Vue-cli proxyTable]

假如不用代理，那需要怎样设置呢？

最简单的方法是服务端将响就头设置成Access-Control-Allow-Origin：域名，如果客户端发送请求时，不需要携带cookie等信息，可以设置成Access-Control-Allow-Origin：\*，表示任何域都可以向服务端发送请求，客户端不需要任何配置，就可以进行跨域调试了。

但是一般的网站，都需要向后端发送cookie来进行身份验证，此时，服务器还需向响应头设置Access-Control-Allow-Credentials:true，表示跨域时，允许cookie添加到请求中。设置Access-Control-Allow-Credentials:true后，要将Access-Control-Allow-Origin指定到具体的域，否则cookie不会带到客户端，例如设置成Access-Control-Allow-Origin：[http://192.168.0.1:8088,http://192.168.0.1:8088][http_192.168.0.1_8088_http_192.168.0.1_8088]是前端服务器的域名，这就要求用webpack的时候，要指定具体的域来启动，不要直接用localhost。

要向后端发送cookie，前端也需要有相应的配置。我在项目中，引用了fetch的polyfill,直接用fetch来发送ajax请求，需要将credentials设置成include，表示允许跨越传递cookie，不要将credentials设置成same-origin,如果设置成same-origin，只会在同源的时候发送cookie。另外还要将withCredentials设为true。

jquery的设置如下：

xhrFields: {
        withCredentials: true
    },
    crossDomain: true,

为了勉励自己多些总结，开了个微信公众号(front-end-article)，最近都在用vue做项目，近期应该会写一些关于vue的文章。有兴趣可以关注一下哦，或者投稿也可以，多多交流哈：

![FpwTLK1Y844HOATGEsdEM2swWytp][]

[vue-vueRouter-webpack]: https://github.com/vingojw/vue-vueRouter-webpack
[Vue-cli proxyTable]: http://www.jianshu.com/p/95b2caf7e0da
[http_192.168.0.1_8088_http_192.168.0.1_8088]: http://192.168.0.1:8088,http://192.168.0.1:8088
[FpwTLK1Y844HOATGEsdEM2swWytp]: http://divio.qiniudn.com/FpwTLK1Y844HOATGEsdEM2swWytp