简单设置,解决使用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的文章。有兴趣可以关注一下哦,或者投稿也可以,多多交流哈:
最新文章
- 解决undefined reference to `__poll_chk@GLIBC_2.16' 错误
- android 查看解压后的.xml文件代码(axmlprinter2)
- c++常见输入方法[持续更新]
- C#中ToString和Formate格式大全
- 92. Reverse Linked List II
- 建立tcl文件
- caffe层解读系列-softmax_loss
- Python学习之旅--第一周--初识Python
- 测试不同格式下depth buffer的精度
- JDBC数据源 使用JNDI连接池实现数据库的连接
- [CQOI2009]dance跳舞
- python 云打码 hhtp接口
- C++——虚函数问题小集
- More Moore and More than Moore
- BZOJ4817[Sdoi2017]树点涂色——LCT+线段树
- 你可能不知道的51个Linux经典命令
- C++11 constexpr使用
- ms-sql 给表列添加注释
- java之进程和线程
- MUI框架-08-窗口管理-创建子页面
热门文章
- LINQ LINQ Operators and Lambda Expression - Syntax &; Examples
- PAT/图形输出习题集
- 记录HttpWebRequest辅助类
- 作业2源程序版本管理软件优缺点,及Github注册
- 【读书笔记】HTML5 Web存储
- Ng Http Request/response格式转换
- 基于uploadify.js实现多文件上传和上传进度条的显示
- 渣渣小本求职复习之路每天一博客系列——Unix&;Linux入门(5)
- [nRF51822] 4、 图解nRF51 SDK中的Schedule handling library 和Timer library
- Qt QT_BEGIN_NAMESPACE