踩坑记录-前端请求如果携带Cookie信息，那么后端Access-Control-Allow-Ori

Bowman_han 发布于2019-08-22 18:32 / 2484人阅读

摘要：踩坑记录前端请求如果携带信息，那么后端不能为知识点前端发出的请求如果是附带身份验证而后端的如果设置的是那么这个请求会失败，在预请求时会被拦截下来。来源文档踩坑记录在一个文件上传的接口出现问题。

踩坑记录-前端请求如果携带Cookie信息，那么后端Access-Control-Allow-Origin不能为* 知识点

前端发出的请求如果是附带身份验证（withCredentials：true）

而后端的Access-Control-Allow-Origin如果设置的是*

那么这个请求会失败，在Options预请求时会被拦截下来。

来源 MDN文档：
https://developer.mozilla.org...

踩坑记录

在一个文件上传的接口出现问题。

1.查看Network发现只有预请求Option

2.查看console控制台，报错

大概意思是说，在预请求时，请求就失败了。
Access-Control-Allow-Origin不能为 * ,当请求的证书模式为“include”时
这是你的请求没有通过的原因
这个证书模式初始化是通过Ajax的withCredentials属性控制的

3.查看文件上传的vue代码

可以看到我设置了:with-credentials="true"

4.查看:with-credentials=“true”是什么意思，根据element文档

得知with-credentials是用来设置是否支持发送cookie凭证信息的字段

总结

可以理解为这是一条http协议或者CORS的规则。

就是当request中设置了withCredentials : true,也就是请求携带了验证身份信息时，

response的Access-Control-Allow-Origin : *,（而是应该有请求身份过滤）

否则的话，请求会失败。

这里的解决办法有2个，

一个后端设置Access-Control-Allow-Origin做一个身份过滤

一个是前端设置withCredentials：false。也就是前端放弃传递Cookie信息

因为我这里还真没必要传递Cookie身份信息，所以我就选择设置withCredentials：false

GPU云服务器云服务器后端前端前端后端后端和前端后端web前端

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

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

HTTP访问控制（CORS）踩坑小记

摘要：前几天在帮后端排查一个的问题的时候发现的一些小坑特此记录的本质是出于安全原因，浏览器限制从脚本内发起的跨源请求。排查发现访问失败的都是需要用户的登录态的。前几天在帮后端排查一个cors的问题的时候发现的一些小坑特此记录 ** cors的本质是出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。例如，XMLHttpRequest和FetchAPI遵循同源策略。这意味着使用这些A...

xiongzenghui 2019-08-22 15:26 评论0 收藏0
HTTP访问控制（CORS）踩坑小记

摘要：前几天在帮后端排查一个的问题的时候发现的一些小坑特此记录的本质是出于安全原因，浏览器限制从脚本内发起的跨源请求。排查发现访问失败的都是需要用户的登录态的。前几天在帮后端排查一个cors的问题的时候发现的一些小坑特此记录 ** cors的本质是出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。例如，XMLHttpRequest和FetchAPI遵循同源策略。这意味着使用这些A...

wujl596 2019-08-01 18:42 评论0 收藏0
Dva + Ant Design 前后端分离之 React 应用实践

摘要：数据缓存对于一个应用来说，缓存是很重要的一步。所以，比较常见的方法就是将数据缓存在中。什么时候做数据缓存例用户信息缓存参见在中配置了检测中的是否存在。源站链接 https://tkvern.com 继 Rails 从入门到完全放弃拥抱 Elixir + Phoenix + React + Redux 这篇文章被喷之后，笔者很长一段时候没有上社区逛了。现在 tkvern 又回归了，给...

tainzhi 2019-08-20 14:03 评论0 收藏0