uni-app 发送请求时遇到报错 Refused to set unsafe header “Cookie“

最新推荐文章于 2023-09-11 16:05:19 发布
原创 最新推荐文章于 2023-09-11 16:05:19 发布 · 8.2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #http #网络协议 #uni-app

在uni-app开发快手小程序时遇到请求头设置Cookie被拒绝的问题，这是由于W3C的安全规定。尝试设置withCredentials无果，因H5才支持。最终通过与后端协商，将Cookie替换为token来解决跨域问题。

在使用uni-app开发快手小程序时，遇到如下错误:
Refused to set unsafe header "Cookie"
在这里插入图片描述

这到底是什么问题呢？但是在同套代码里开发字节小程序就没遇到该问题。
翻译错误信息为 拒绝设置不安全的标题“Cookie”。

为什么会产生该问题呢?

w3c规定，当请求的header匹配以下不安全字符时，将被终止，具体参考如下：

  Accept-Charset
  Accept-Encoding
  Connection
  Content-Length
  Cookie
  Cookie2
  Content-Transfer-Encoding
  Date
  Expect
  Host
  Keep-Alive
  Referer
  TE
  Trailer
  Transfer-Encoding
  Upgrade
  User-Agent
  Via

尝试方案1：

设置withCredentials
却发现如下问题：
1.uni.request设置withCredentials
2.仅H5支持
在这里插入图片描述

尝试方案2：

与后端协商之后，将cookie改为token

解决！

Vue axios 跨域请求无法带上cookie的解决
11-19
补充知识：VUE axios请求跨域时没有带上cookie或者每次cookie都改变 这两天用VUE写管理后端时，碰到一个奇葩问题： 我本地使用dev配置开发的时候 请求可以带上cookie信息 打包出来部署在服务器上 请求就没带上...
js设置cookie
10-20
有js设置和获取cookie 简单实用易看懂免费为大家分享 有兴趣的可以参与看看啊
axios Refused to set unsafe header has been blocked by CORS policy
未金涛的博客
11-23 7262
前言 事情是这样的，我准备复制一个资源下载类的网站。第一步肯定是爬取目标网站的资源了。我在用python写爬虫的时候，当我提取完网页中的基础数据之后。就发现，目标网站后面大部分的数据都是通过有规律的aip返回的json数据源。这个时候作为一个白飘党，我就在想能不能直接白嫖对面的api，直接拿来用呢？然后，在前端遇到了些问题，我感觉以我现在的技术水准无法解决。 前端axios请求示例 axios({ method: "post", // url: "https://msdn
ajax跨域请求传递Cookie问题
細水、長流√的专栏
05-14 4938
问题描述 前后端完全分离的项目，前端使用Vue + axios，后端使用SpringMVC，容器为Tomcat。 使用CORS协议解决跨域访问数据限制的问题，但是发现客户端的Ajax请求不会自动带上服务器返回的Cookie：JSESSIONID。 导致每一个Ajax请求在服务端看来都是一个新的请求，都会在服务端创建新的Session（在响应消息头中设置Set-Cookie：JSESSIONID=xxx）。 而在项目中使用了Shiro框架，用户认证信息是放在Session中的，由于客户端不会把JSESSIO
前端：常用点，记不到(1)
natiaolu的博客
06-02 4165
1、this.$router.back(); //返回上一级 2、父组件可以使用 props 把数据传给子组件。 3、子组件可以使用 $emit 触发父组件的自定义事件。 Moment （超常用，时间转换） 1、将时间转换为时间戳（每次这么简单，我为啥记不住） moment(start_time).valueOf() / 1000 2、只有时间可以转换为moment对象（反显在组件上面） [moment(start_time), moment(end_time)] [moment( 2019-12-
Refused to set unsafe header “cookie“
amemd的博客
01-04 8424
1.把Cookie改成Authorization，让后端从Authorization中拿到相关登录信息；但是报错 Refused to set unsafe header “cookie”2.前端来做登录，每次发送openid给后台，后端来保持登录状态。原因是w3c中不允许手动设置cookie。发送给后台的后续请求在head添加。
Refused to set unsafe header "cookie"
ryy的博客
03-27 4万+
记 web端微信登陆之后，保存登录状态的问题： 发送给后台的后续请求在head添加 header: { "content-type": "application/x-www-form-urlencoded", 'Authorization': session_id }, 但是报错 Refused to set unsafe header “cookie” 原因是w3c中不允许手动设置...
前端设置Cookie请求头报错 Refused to set unsafe header “Cookie“
weixin_56530078的博客
09-11 4129
前端设置Cookie请求头报错 Refused to set unsafe header "Cookie"
前端设置Cookie请求头报错 Refused to set unsafe header "Cookie"
03-21
浏览器不允许前端设置一些敏感的请求头，例如Cookie。如果你想要在前端设置Cookie，可以考虑使用一些第三方库，例如js-cookie。这个库可以帮助你在前端设置Cookie，而不会触发浏览器的安全策略。
出现这个以下报错Refused to set unsafe header "User-Agent"怎么解决
06-08
这个报错是因为浏览器禁止设置某些Header，包括User-Agent。为了解决这个问题，我们可以使用axios的...这样，每次请求都会带上设置的User-Agent参数值，而不会再出现Refused to set unsafe header "User-Agent"的错误。
xhr.js:108 Refused to set unsafe header "cookie"
07-28
- *2* [uni-app 发送请求时遇到报错 Refused to set unsafe header “Cookie](https://blog.youkuaiyun.com/Dark_programmer/article/details/122839339)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630...
Refused to set unsafe header "Date"
绯浅yousa的笔记
03-08 6471
w3c规定，当请求的header匹配以下不安全字符时，将被终止 Accept-Charset Accept-Encoding Connection Content-Length Cookie Cookie2 Content-Transfer-Encoding Date Expect Host Keep-Alive Referer TE Tr...
设置Cookie请求头报错(Refused to set unsafe header “Cookie“)
诚的博客
08-25 8255
请求的header匹配以下不安全字符时，将被终止，具体参考如下： Accept-Charset Accept-Encoding Connection Content-Length Cookie Cookie2 Content-Transfer-Encoding Date Expect Host Keep-Alive Referer TE Trailer Transfer-Encoding Upgrade User-Agent Via
设置Cookie请求头报错(Refused to set unsafe header "Cookie")
初心 - 杨瑞超个人博客
05-08 3万+
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828 w3c规定，当请求的header匹配以下不安全字符时，将被终止，具体参考如下： Accept-Charset Accept-Encoding Connection Content-Length Cookie Cookie2 C...
EasyGBS客户调用token出现refuse to set unsafe header “cookie”报错是什么原因？
EasyGBS的博客
08-31 804
TSINGSEE青犀视频对目前现有的云边端架构产品进行了token认证机制的修改，由于新版这个机制的更改，所以我们的集成调用的方式也发生了改变。在部分EasyGBS用户使用中，客户调用token会出现refuse to set unsafe header “cookie”的问题，调用token失败，不能登录。 原本的机制中，token是写进cookie里面，每次就调用浏览器缓存就可以实现登录了，这种方式之前是可以正常调用的，但是新版谷歌浏览器无法跨域携带cookie了，因此此处调用会出现报错情况。
从XMLHttpRequest请求响应里getResponseHeader(header)报错：Refused to get unsafe header "**" 问题解决
热门推荐
iuoon的博客
12-16 4万+
问题产生原因： 原因1：W3C的 xhr 标准中做了限制，规定客户端无法获取 response 中的 Set-Cookie、Set-Cookie2这2个字段，无论是同域还是跨域请求； 原因2：W3C 的 cors 标准对于跨域请求也做了限制，规定对于跨域请求，客户端允许获取的response header字段只限于“simple response header”和“Ac
关于uni-app下载文件报错 Refused to get unsafe header “content-disposition“ uniapp
CDZ_Saber的博客
08-23 9827
uni-app下载文件报错 Refused to get unsafe header "content-disposition" uniapp
uni-app refused to get unsafe referer报错
最新发布
09-27
<think>我们注意到用户查询的是“refused to get unsafe referer”错误，而提供的引用内容主要涉及： 引用[1]：关于frame-ancestors的CSP策略错误（Refused to display ... in a frame） 引用[2][3]：关于设置不安全请求头（如Cookie）导致的错误（Refused to set unsafe header） 引用[4]：关于获取不安全响应头（Content-Disposition）的错误（Refused to get unsafe header） 用户提到的错误是“refused to get unsafe referer”，这类似于引用[4]中的“Refused to get unsafe header”错误，但具体头是“Referer”（注意拼写，有一个'r'）。 根据引用[4]的解决方案，它通过设置服务器响应头`Access-Control-Expose-Headers`来允许客户端获取特定的响应头（如Content-Disposition）。因此，我们可以推断： 问题原因：浏览器出于安全考虑，默认不允许前端JavaScript获取某些敏感的响应头（如Referer）。 解决方案：需要在服务器的响应中显式暴露这些头（使用`Access-Control-Expose-Headers`）。 然而，用户错误中提到的头是“Referer”，这是一个请求头（Request Header），而不是响应头（Response Header）。所以这里可能存在混淆。 我们需要区分： - 请求头（Request Headers）：由客户端（浏览器）发送给服务器的头信息。 - 响应头（Response Headers）：由服务器返回给客户端的头信息。 根据错误信息“refused to get unsafe referer”，这可能是尝试在客户端JavaScript中获取响应头中的“Referer”字段？但通常Referer是请求头。 另一种可能是：在跨域请求中，服务器返回的响应头中包含了Referer（这并不常见，因为Referer通常是请求头），而客户端尝试获取它，但浏览器认为这个头是不安全的，因此需要显式暴露。 但更常见的场景是：在跨域请求中，客户端使用XMLHttpRequest或Fetch API时，默认只能访问以下响应头：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。其他头需要服务器通过`Access-Control-Expose-Headers`暴露。 因此，我们可以这样解决： 1. 如果是服务器返回的响应头中包含Referer（或者其他自定义头），并且前端需要获取，那么服务器需要在响应中添加： `Access-Control-Expose-Headers: Referer` 2. 但是，Referer通常是由浏览器自动添加到请求头中发送给服务器的，而不是由服务器返回。所以，这个错误可能是由于前端试图读取请求头中的Referer？但请求头通常是由浏览器控制的，JavaScript无法直接获取完整的请求头（除了通过`XMLHttpRequest`的`getAllResponseHeaders()`方法，但这个方法只能获取到响应头，不能获取请求头）。 重新审视错误信息：“refused to get unsafe referer”。这个错误信息并不常见，我们需要结合引用[4]和跨域资源共享（CORS）机制来分析。 根据引用[4]中的错误“Refused to get unsafe header 'content-disposition'”，这是由于前端尝试通过`XMLHttpRequest`的`getResponseHeader('content-disposition')`获取响应头，但该头未被服务器暴露。同理，“refused to get unsafe referer”可能是前端尝试获取响应头中的Referer（虽然这种情况很少见）或服务器返回的响应头中包含Referer且前端需要获取它。 因此，解决方案是： 在服务器端设置响应头，将需要暴露给前端的头（包括Referer）添加到`Access-Control-Expose-Headers`中。例如，在服务器响应中设置： Access-Control-Expose-Headers: Referer 注意：如果还有其他的自定义头需要暴露，可以同时添加，用逗号分隔。 另外，如果是因为跨域问题，还需要设置： Access-Control-Allow-Origin: <允许的域名> 或者 * 但是，如果用户的问题并不是在响应头中获取Referer，而是与请求头Referer有关，那么可能是另一种情况：在发送请求时，浏览器自动添加了Referer请求头，但服务器端的CORS策略不允许该Referer？这种情况通常不会出现“refused to get unsafe referer”的错误信息。 由于用户描述的问题是在uni-app开发中出现，而uni-app可以运行在H5、小程序等多个平台。如果是在H5平台，则遵循浏览器的CORS策略；如果是在小程序平台，则小程序的运行环境可能有所不同。 因此，需要明确用户是在哪个平台运行？但用户没有说明，我们假设是H5平台。 综上，给出解决方案： 步骤1：检查服务器响应头中是否返回了Referer头？如果前端需要获取这个头，则按照上述方法设置`Access-Control-Expose-Headers`。 步骤2：如果前端并没有试图获取Referer头，那么可能是第三方库或uni-app自身在尝试获取，而服务器没有暴露。同样需要设置服务器响应头。 步骤3：如果问题仍然存在，检查是否涉及跨域请求，确保服务器正确配置了CORS。 引用[4]中给出的Java示例设置： response.addHeader("Access-Control-Expose-Headers", "Content-Disposition,download-filename"); 我们可以将其修改为： response.addHeader("Access-Control-Expose-Headers", "Referer"); 或者，如果需要暴露多个头，可以： response.addHeader("Access-Control-Expose-Headers", "Referer, Other-Header"); 步骤4：如果用户无法修改服务器端代码（例如，请求的是第三方服务器），那么可以考虑通过代理绕过CORS限制，或者与第三方服务提供者协商解决。 注意：错误信息中的“unsafe”指的是浏览器认为该头部信息可能不安全，因此限制前端JavaScript直接获取。 因此，针对用户的问题，我们主要建议在服务器端设置`Access-Control-Expose-Headers`来暴露Referer头。如果用户无法控制服务器，则需要考虑其他方法。 另外，由于用户使用的是uni-app，如果是在小程序环境，则不存在浏览器的CORS限制，因此可能不会出现这个错误。所以，这个错误通常发生在H5平台。 总结解决方案： 1. 在服务器响应中添加`Access-Control-Expose-Headers`响应头，包含需要暴露的头（如Referer）。 2. 确保服务器同时配置了合适的`Access-Control-Allow-Origin`。 3. 如果无法修改服务器配置，考虑使用代理。 最后，由于引用[2][3]提到了设置不安全请求头的错误，而用户的问题是关于获取响应头，所以引用[2][3]的内容可能不直接相关。引用[1]是关于CSP策略，与当前问题无关。 因此，我们主要参考引用[4]的解决思路。 下面给出具体的回答： </think>### Uni-App出现"Refused to get unsafe referer"错误的解决方法 这个错误通常发生在跨域请求时，浏览器安全机制阻止了`Referer`头的获取。以下是具体解决方案： #### 1. **服务端配置CORS响应头** 在服务器响应中添加以下头部，允许客户端获取`Referer`头： ```http Access-Control-Expose-Headers: Referer Access-Control-Allow-Origin: https://your-domain.com // 指定允许的域名 ``` - **Java示例**： ```java response.addHeader("Access-Control-Expose-Headers", "Referer"); response.setHeader("Access-Control-Allow-Origin", "https://your-domain.com"); ``` - **Nginx配置**： ```nginx add_header 'Access-Control-Expose-Headers' 'Referer'; add_header 'Access-Control-Allow-Origin' 'https://your-domain.com'; ``` #### 2. **前端修改请求配置（uni-app）** 在`uni.request`中显式声明需要获取的响应头： ```javascript uni.request({ url: 'https://api.example.com/data', header: { // 确保不会尝试设置不安全头 }, success: (res) => { // 此时可安全获取Referer console.log(res.header.Referer); } }); ``` #### 3. **检查请求头安全性** 避免手动设置以下W3C禁止的不安全请求头[^2][^3]： ```javascript // 错误示例（会触发安全拦截）： uni.request({ header: { 'Referer': 'custom-value', // 浏览器自动管理此头 'Cookie': 'xxx' // 禁止手动设置 } }); ``` 浏览器会自动处理`Referer`，手动设置会触发`Refused to set unsafe header`错误。 #### 4. **跨域策略一致性验证** 确保： - 请求协议相同（均为HTTP或HTTPS） - 主域/子域完全匹配（`https://a.example.com` ≠ `https://b.example.com`） - 若使用`<iframe>`，检查`Content-Security-Policy`的`frame-ancestors`配置[^1] #### 5. **调试替代方案** 如需本地调试，可临时使用浏览器安全豁免： 1. Chrome启动参数添加： ```bash chrome.exe --disable-web-security --user-data-dir="C:\Temp" ``` 2. **仅限开发环境**，生产环境必须通过服务端解决。 > **根本原因**：浏览器安全策略限制JS获取敏感头部，`Referer`被列为"不安全头"，需服务端显式暴露[^4]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值