简单设置,解决使用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,

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

MAC本遭遇ARP攻击的处理办法

windows环境下,如果遭遇ARP攻击,解决方法很简单:“360安全卫士”或"QQ软件管理"的实时防护里,都有ARP防护功能(默认是关闭的),只要启用就行了。...

1736
来自专栏Albert陈凯

VMware workstation网络NAT模式修改虚拟网络子网网段

安装wm ware 时,系统默认添加两个网卡,网段是随机的,如果想修改,需要在软件里面设置一下 在菜单中选择:编辑-->虚拟网络编辑器 ? VMware虚拟机设...

3454
来自专栏猫哥学前班

网络慢?看看路由器设置对不对

防蹭网 开启 UPnP QoS 与网络限速 设置正确的 MTU 值 使用路由器交换机模式 使用无线中继扩展 Wi-Fi 信号 1、防蹭网 这是最最首要的一条...

44416
来自专栏架构师之路

linux下追查线上问题常用命令

linux下追查线上问题常用命令 (1)查占用cpu最多的进程 方法一: 核心指令:ps 实际命令: ps H -eo pid,pcpu | sort -nk2...

3459
来自专栏landv

华为AR2811配置脚本

90
来自专栏各种机器学习基础算法

PHP获取URL地址的一些坑

在一些业务场景中,我们需要用到PHP去获取URL地址,度娘搜索了一下,发现都是同一种解决方案,如下: #测试网址: http://localhost/b...

4046
来自专栏闵开慧

centos 网络配置视频地址及截图

1 地址:http://www.itercast.com/library/1 IP编址是现今使用最为广泛的网路编址协议,拥有两个主流版本:IPv4、IPv...

3345
来自专栏猛牛哥的博客

windows系统自带的端口转发工具:netsh

1371
来自专栏流媒体

Linux下Socket编程(六)——udp简介

中文叫用户数据报协议,属于传输层。UDP是面向非连接的协议,它不与对方建立连接,而是直接把我要发的数据报发给对方。所以UDP适用于一次传输数据量很少、对可靠性要...

762
来自专栏游戏杂谈

记一次Nginx 400错误

在一个非CDN的域名下有一个页面,需要请求CDN域名下的资源。所以在CDN的那台源站的Nginx上设置了

731

扫码关注云+社区