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

最近用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的文章。有兴趣能够关注一下哦，或者投稿也能够，多多交流哈：