简朴设置，处理运用webpack前后端跨域发送cookie的题目

2019年8月31日 231次阅读 来源: 对角另一面

近来用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:…是前端服务器的域名，这就请求用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的文章。有兴致能够关注一下哦，或许投稿也能够，多多交换哈：

《简朴设置，处理运用webpack前后端跨域发送cookie的题目》

    原文作者：对角另一面
    原文地址: https://segmentfault.com/a/1190000006876939
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞