如何配置ajax请求跨域携带cookie,cors支持ajax请求携带cookie

有些同学看到这个文章标题有点晕,这是个什么情况呢?

首先咱们来看一下前后端数据交互的一些规则:

1、同域名下发送ajax请求,请求中默认会携带cookie

2、ajax在发送跨域请求时,默认情况下是不会携带cookie的

3、ajax在发送跨域请求时如果想携带cookie,必须将请求对象的withcredentials属性设置为true。

4、此时服务端的响应头Access-Control-Allow-Origin不能为*(星号)了,必须是白名单样式,也就是必须设置允许哪些url才能访问,如:

Access-Control-Allow-Origin: http://api.bob.com

5、除了对响应头Access-Control-Allow-Origin的设置,还必须设置另外一个响应头:Access-Control-Allow-Credentials:true。

接下来咱们来一条条验证:

1、同域名下发送ajax请求,请求中默认会携带cookie,

我们用express构建一个静态资源服务器端口为3000,然后新建一个页面,在页面中直接调用jquery的ajax方法,直接调用此方法会向当前url发送一个get请求:

然后我们看network:

此时时携带有cookie的。

2、ajax在发送跨域请求时,默认情况下是不会携带cookie的。

这次我们在用express搭建一个服务器,端口号为5000,然后在3000端口号的服务器上面的网页中发送ajax请求5000服务器的接口,看看请求结果:

network:

仔细观察是没有cookie的。

接着看第三条:

3、ajax在发送跨域请求时如果想携带cookie,必须将请求对象的withcredentials属性设置为true。我们如果使用jquery发送ajax的话需这样设置withcredentials属性:

此时查看network:

此时cookie又回来了,到此为止前端人员的设置就算完成了,虽然现在ajax执行后,最终调用的是错误回调,那是因为后端还不支持cors。

此时我们验证第四条:

4、此时服务端的响应头Access-Control-Allow-Origin不能为*(星号)了,必须是白名单样式,也就是必须设置允许哪些url才能访问,如:

Access-Control-Allow-Origin: http://api.bob.com

首先在服务端开启cors,并且将Access-Control-Allow-Origin的值设置为*。

通过express构建的服务只需要加载cors中间件,并调用这个中间件,不需要设置任何参数默认就会设置Access-Control-Allow-Origin为*。

重启 端口为5000的服务器,查看network请求头信息是这样的:

此时cookie是携带过去的,这一点通过上面的实验已经验证过了。

而响应头信息是这样的:

响应头中设置了Access—Control—Allow—Origin:*,说明已经支持跨域了。

但是ajax调用后执行的还是错误回调,并且console面板打印了一个错误:

大致意思就是:如果前端请求中的withcretentials的属性为true,后端响应头中的Access-Control-Allow-Origin绝对不能是*。所以会报错,此时如果将ajax请求中的withcretentials属性去掉或者设置成false,就不会报错了,但是那样的话,就不会携带cookie了。

那需要后端如何设置才能支持前端发送ajax请求携带cookie呢,Access-Control-Allow-Origin必须设置成这样子:Access-Control-Allow-Origin: http://api.bob.com,而在express搭建的服务器中只需要配置cors中间件的一个参数就可以了。

此时查看network,请求头信息:

完美携带cookie的,

看看响应头:

响应头中Access-Control-Allow-Origin的值设置成了白名单,但是等等,此时为什么ajax调用后,还是执行错误毁掉呢?

继续看第五条:

5、除了对响应头Access-Control-Allow-Origin的设置还必须设置另外一个响应头:Access-Control-Allow-Credentials:true。

在cors中间件中配置一个参数就可以了:

此时查看network的响应头信息:

查看响应头多了一个Access-Control-Allow-Credentials:true,此时ajax的回调终于是成功回调了。

总结一下,如果公司项目采用前后端分离,后端接口形式以cors支持跨域,而此时前端发送ajax请求需要携带cookie,前端请求必须设置XMLhttprequest实例的withCredenetials属性为true,服务端必须设置Access-Control-Allow-Origin为白名单样式,并且需要在响应头中设置:Access-Control-Allow-Credentials为ture。

cors除了cookie的限制,请求头也做了限制,客户端如果想发送自定义请求头,服务端必须设置Access-Control-Allow-Headers为*,或者白名单的样式,这里使用express中间件的同学注意,cors中间件默认Access-Control-Allow-Headers为*,也就是说直接使用cors中间件可以允许客户端传递任何自定义请求头。

如果想通过cors中间件设置Access-Control-Allow-Headers白名单,如图:

如果设置白名单的话,这个响应头在浏览器中是不会出现的,想想也是,设置了白名单就是为了不让信息泄密啊。

以上是前端发送请求设置自定义请求头,需要服务端配合,设置一个Access-Control-Allow-Header的响应头就可以了。

cors对前端获取响应头的行为也做了限制,默认情况下,前端是获取不到响应头的,这里需要设置一个响应头:Access-Control-Expose-Headers,这个响应头最好不要设置成通配符样式,而要设置成白名单,在cors中间件中这样设置:

这样的话前端就可以通过xmlhttprequset请求对象的实例的getAllResponseHeaders方法得到这个响应头了。

本篇文章耗时三到四个小时,文末我会将代码地址贴出来,供大家参考。

以上便是今天关于ajax、cookie、cors的内容了,有什么问题欢迎留言。

相关资料 axios的cookie跨域以及相关配置https://segmentfault.com/a/1190000011811117 跨域资源共享 CORS 详解 http://www.ruanyifeng.com/blog/2016/04/cors.html cors中间件的使用方法 https://www.npmjs.com/package/cors express如何设置req的header https://segmentfault.com/q/1010000005957500 允许跨域资源共享(CORS)携带 Cookie https://www.jianshu.com/p/6b9a7892fdc7 演示代码地址: https://github.com/clm1100/corsAndProxy

本文分享自微信公众号 - nodejs全栈开发(geekclass)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-09-27

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏python学习教程

【Python爬虫】如何爬取翻页url不变的网站

之前打算爬取一个图片资源网站,但是在翻页时发现它的url并没有改变,无法简单的通过request.get()访问其他页面。据搜索资料,了解到这些网站是通过aja...

24810
来自专栏猿GG编程

基于注解@Async的SpringBoot异步调用及使用场景

首先要在springboot项目的启动上添加@EnableAsync开启异步监控,自动扫描。没有这个主角儿一切都是扯淡。

36410
来自专栏汪宇杰博客

ASP.NET Core通过jQuery Ajax发送AntiForgeryToken

在ASP.NET Core中,如我我们希望用jQuery Ajax向服务器提交数据,并希望使用ValidateAntiForgeryToken标记,我们需要一些...

12120
来自专栏技术探究-前端、Python、爬虫、数据分析、工具

爬虫系列(3)初窥urllib库。

其实就是根据URL来获取它的网页信息,虽然我们在浏览器中看到的是一幅幅优美的画面,但是其实是由浏览器解释才呈现出来的,实质它是一段HTML代码,加 JS、CSS...

8630
来自专栏AiSmart4J

前端之 JavaScript 知识点小结

当你需要有跨域的请求操作时发送请求给后端,让后端帮你代为请求,然后最后将获取的结果发送给你。

6030
来自专栏编程微刊

ajax请求接口,jquery拼接数据循环

关于上一篇写的文章,jquery拼接数据循环一个数据列表:https://www.jianshu.com/p/d4034550fcf3。如果把json写在接口数...

33420
来自专栏python学习教程

新手学Python爬虫,爬取拉勾网

在之前写拉勾网的爬虫的时候,总是得到下面这个结果(真是头疼),当你看到下面这个结果的时候,也就意味着被反爬了,因为一些网站会有相应的反爬虫措施,例如很多网站会检...

10120
来自专栏爱写Bug

新手向-爬取分析拉勾网招聘信息

然后在拉勾网搜索关键词 算法工程师 回车,然后点击下一页、下一页,此时开发者工具里的Network 下XHR(表示该网站是以Ajax方式获取刷新信息的)应当如下...

10840
来自专栏sofu456

jquery\json\ajax

JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象

14130
来自专栏凯哥Java

JavaWeb学习-Ajax-1-Ajax简介

进入到一个新的知识点的学习,这个知识点叫做Ajax,指的是异步的javascript和xml,Ajax不是一种编程语言,而是一种用于创建更好更快,交互性更强的w...

8830

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励