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

Posted 2020-09-22 张玉宝

最近用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 解决开发环境的跨域问题

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

最简单的方法是服务端将响就头设置成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是前端服务器的域名，这就要求用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的文章。有兴趣可以关注一下哦，或者投稿也可以，多多交流哈：