简单设置,解决使用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 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

HTTP协议漫谈

简介 园子里已经有不少介绍HTTP的的好文章。对HTTP的一些细节介绍的比较好,所以本篇文章不会对HTTP的细节进行深究,而是从够高和更结构化的角度将H...

375130
来自专栏博客园迁移

jenkins自动部署应用到tomcat中,编译后shell脚本的简单示例

1.先配置好jenkins需要用到的其他外部组件  jdk,maven,git/svn

25030
来自专栏李家的小酒馆

JQuery $.axaj的基本格式

8820
来自专栏微服务

CentOS上安装RabbitMQ

所需环境 操作系统:Centos服务一台 网络环境:可以访问公网 安装Erlang RabbitMQ是一个开源的AMQP实现,服务器端用Erlang语言编写...

39490
来自专栏Golang语言社区

HTTP协议漫谈

简介 园子里已经有不少介绍HTTP的的好文章。对HTTP的一些细节介绍的比较好,所以本篇文章不会对HTTP的细节进行深究,而是从够高和更结构化的角度将H...

40060
来自专栏生信技能树

生信主管应该了解的十个Linux知识点

linux的发行版非常多,其实本质上差别不大,哪怕是mac的OS应该是也是同样的管理操作模式。以下针对于ubuntu适用,当然ubuntu本身也有版本的区别,目...

33140
来自专栏云计算教程系列

如何在Ubuntu 14.04上使用Pydio托管文件共享服务器

随着云的采用增加,越来越多的数据被远程存储。从音乐到图片再到个人文档,很多人都将文件上传到他们不管理的服务器上。如果您希望将文件保存在您控制的服务器上,则可以使...

41900
来自专栏pangguoming

使用C#创建及调用WCF完整实例 (Windows服务宿主)

关于WCF的概念、原理、优缺点等,在这里就不多说了,网上很多,可以自行搜索,比我解释的要专业的多。 这里直接说使用Windows 服务(Windows Serv...

57960
来自专栏云计算教程系列

如何在服务器上安装LAMP

在本教程中,我们将在Ubuntu上安装LAMP。Ubuntu将满足我们的第一个要求:Linux操作系统。没有服务器的同学可以在这里购买,不过我个人更推荐您使用免...

59220
来自专栏FreeBuf

如何在安卓移动终端进行一次渗透实验?

下面的实验将通过使用一个虚拟Android系统作为实验主体来进行展示。在这个实验中,通过使用虚拟Android系统,模拟移动终端的操作,来帮助我们逐步实现使用一...

36460

扫码关注云+社区

领取腾讯云代金券