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

wwq0327 发布于2019-08-21 14:25 / 3069人阅读

摘要：最近用来做项目，用来做前端自动化构建。会在本地搭建一个服务器，在和后端调试的时候，就会涉及到跨域的问题。要向后端发送，前端也需要有相应的配置。另外还要将设为。

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

GPU云服务器云服务器端跨域 cookie的使用跨域cookie java跨域cookie共享

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87897.html

cookie跨域共享 cookie二级域名共享前后端分离项目共享cookie

摘要：例如和，这两个域名的二级域名就是相同的代码实现基于添加通过二级域名共享添加通过二级域名共享关闭浏览器时删除代表关闭浏览器删除负数则关闭浏览器失效没有删除参数介绍需要设置的二级域名至少是二级域名，可以是三级域名四级域名设置可以访问的路径。背景最近在做sso单点登录，sso登录成功后后端需要把token和用户信息以cookie的方式传送给前端，由于项目是前后端分离的，这就涉及到了前后端...

mj 2019-08-19 10:48 评论0 收藏0
跨域总结(jquery,php)

摘要：引子项目原因，前后端跨域了，第一次涉及到跨域的内容，踩了蛮多坑的，总结一下，避免下次再遇到一图片发送请求因为图片是不会去判断是否跨域的，但是也只能发送请求，并且获取不到返回值，可以用来监听页面访问数量或者广告点击数量二只能用于请求，设置使用引子项目原因，前后端跨域了，第一次涉及到跨域的内容，踩了蛮多坑的，总结一下，避免下次再遇到~ 一、图片发送请求因为图片是不会去判断是否跨域的，...

XboxYan 2019-08-22 15:05 评论0 收藏0
跨域总结(jquery,php)

摘要：引子项目原因，前后端跨域了，第一次涉及到跨域的内容，踩了蛮多坑的，总结一下，避免下次再遇到一图片发送请求因为图片是不会去判断是否跨域的，但是也只能发送请求，并且获取不到返回值，可以用来监听页面访问数量或者广告点击数量二只能用于请求，设置使用引子项目原因，前后端跨域了，第一次涉及到跨域的内容，踩了蛮多坑的，总结一下，避免下次再遇到~ 一、图片发送请求因为图片是不会去判断是否跨域的，...

dingding199389 2019-06-28 18:29 评论0 收藏0
基于 HTTP 请求拦截，快速解决跨域和代理 Mock

摘要：今天这篇文章，我们会介绍几种常见的方法和其中存在的问题，并提出如何基于请求拦截，快速解决跨域和代理问题的方案。因为没有修改该请求，只是延迟发送，这样就保持了原请求与业务服务器之间的所有鉴权等相关信息，由此解决了跨域访问无法携带的问题。近几年，随着 Web 开发逐渐成熟，前后端分离的架构设计越来越被众多开发者认可，使得前端和后端可以专注各自的职能，降低沟通成本，提高开发效率。在前后端...

dreamGong 2019-08-26 13:36 评论0 收藏0
javaweb服务端跨域支持

摘要：跨域是浏览器拦截了服务器端返回的相应，不是拦截了请求。通过来实现跨域使用来实现跨域可以解决下不能跨域的问题，仅仅支持请求服务端多加一个参数，在返回数据时用把具体的数据包裹起来，传回前端。项目开发为了支持web浏览器ajax的直接请求，涉及到了跨域的需求，通过学习对跨域有了更深入的认识，现在总结一下： 1.跨域说明跨域指请求和服务的域不一致，浏览器和H5的ajax请求有影响，而对服务...

kycool 2019-08-20 17:41 评论0 收藏0