解决前端Provisional headers are shown问题

一、出现Provisional headers are shown的几种可能性
  1. 跨域,请求被浏览器拦截
  2. 请求被浏览器插件拦截
  3. 服务器出错或者超时,没有真正的返回
  4. 强缓存from disk cache或者from memory cache,此时也不会显示

  这几种都是前端的问题,我们都尝试了,对我们的问题没有效果

二、还是后端的锅

  前端发送post请求,用的是json格式,但是没请求到后端,也没有返回状态吗,最开始以为是前端跨域问题,然后后前端大佬一起找前端的错误,尝试了网上的各种方法都没有效果,最后发现居然是后端的锅。
  在filter中设置请求头的时候,没有加入content-type这个请求头,导致前端传不了json数据,因为浏览器是根据option返回的结果来确定请求参数的,所以前端浏览器发送option时,后端responseAccess-Control-Allow-Headers中没有content-type,导致浏览器post请求content-type,被认为是非法的,直接浏览器拦截了(浏览器和postman这些区别就在于,浏览器在正式请求之前会发送一个option试探,通过option试探来确定需要的请求参数)。正确的设置应该为

response.setHeader("Access-Control-Allow-Origin", origin);
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization,token, content-type"); //这里要加上content-type 
response.setHeader("Access-Control-Allow-Credentials", "true");

  这个问题找了两个多小时,一直以为是前端的问题,还是自己的锅,看来还是自己才疏学浅,基础知识不扎实,还需要努力呀。

<think>好的,我现在需要解决用户提出的关于“小程序 Provisional headers are shown”的问题。首先,我得理解这个问题出现的背景。用户可能是在开发微信小程序时,使用浏览器开发者工具查看网络请求,遇到了Provisional headers are shown的提示,导致无法正常获取请求的详细信息。接下来,我需要分析可能的原因,并给出解决方案。 首先,回忆一下Provisional headers are shown通常出现在Chrome开发者工具的Network选项卡中,这表示请求的头部信息是临时的,实际请求可能被浏览器拦截或未发送。常见原因包括请求被浏览器扩展拦截、跨域问题、缓存导致请求未发送,或者请求被取消。 针对小程序的情况,微信小程序的运行环境与普通浏览器不同,但开发者工具可能基于Chromium,所以类似的问题可能适用。需要分步骤分析: 1. **跨域问题(CORS)**:小程序请求的服务器是否配置了正确的CORS头?虽然小程序不直接受浏览器同源策略限制,但服务器若未正确响应,可能导致问题。需要检查服务器端的Access-Control-Allow-Origin等设置。 2. **请求未发出**:可能是代码中存在错误,比如在请求前有未处理的异常,导致请求未实际发送。检查代码逻辑,是否有条件阻止请求,或者语法错误。 3. **HTTPS限制**:小程序要求使用HTTPS,如果请求的URL是HTTP,可能会被阻止。需要确保所有请求都是HTTPS协议。 4. **开发者工具缓存**:有时候开发者工具的缓存可能导致问题,尝试清除缓存或使用无痕窗口。 5. **网络层拦截**:比如公司网络、防火墙或本地代理设置可能拦截请求。检查网络设置,关闭可能的代理或VPN。 6. **小程序配置问题**:检查小程序的后台配置,比如合法域名是否已正确配置。未在后台登记的域名无法请求,可能导致请求被阻止。 接下来,需要给出具体的解决步骤。例如,首先检查开发者工具的控制台是否有报错,确认请求是否被取消;然后检查服务器域名是否在小程序后台的request合法域名列表中;再确认请求的URL是否正确,是否为HTTPS;最后,检查代码逻辑是否有问题,比如是否在请求前有return或异常。 此外,可能需要指导用户如何使用开发者工具进行调试,比如查看Network面板中的状态码,使用console.log输出调试信息,或者尝试在真机上测试是否同样存在问题,以区分是工具问题还是代码问题。 最后,总结常见解决方法,确保用户能够逐步排查,找到问题根源。同时提醒用户注意小程序的环境限制,如域名配置和HTTPS要求,这些都是常见易错点。</think>**“Provisional headers are shown”** 是浏览器开发者工具(如 Chrome)中常见的网络请求提示,通常出现在小程序的开发调试过程中。它表示浏览器未能获取完整的请求头信息,可能因为请求被中断、未实际发送或被缓存拦截。以下是可能的原因和解决方法: --- ### **常见原因** 1. **请求被取消或未发送** - 代码逻辑错误(如请求前触发了页面跳转、条件判断阻止了请求)。 - 服务器未响应或响应超时。 2. **跨域问题(CORS)** - 后端接口未配置允许小程序的域名(需检查服务器 `Access-Control-Allow-Origin` 等 CORS 头)。 3. **HTTPS 限制** - 小程序要求所有请求必须使用 HTTPS,如果接口是 HTTP 会被浏览器拦截。 4. **小程序域名未配置** - 未在小程序后台的 **“开发设置”** 中配置合法请求域名(包括子域名需单独配置)。 5. **浏览器缓存或插件干扰** - 广告拦截插件(如 AdBlock)或浏览器缓存可能导致请求异常。 6. **开发者工具自身问题** - 微信开发者工具的调试代理或网络模块异常。 --- ### **解决方法** 1. **检查请求是否实际发送** - 在开发者工具的 **Network** 面板中,查看请求状态码: - 若状态为 `(canceled)`,可能是代码跳转或逻辑错误导致请求被中断。 - 若状态为 `200` 但无响应数据,可能是服务器未正确返回 CORS 头。 2. **确认域名已配置** - 登录微信小程序后台,在 **开发管理 → 开发设置 → 服务器域名** 中添加请求的域名(需 HTTPS)。 3. **检查接口协议和 URL** - 确保请求的 URL 是完整的 HTTPS 地址(如 `https://api.example.com`),避免路径拼写错误。 4. **关闭浏览器插件或缓存** - 禁用广告拦截插件,尝试无痕模式或清除开发者工具的缓存(**清除缓存 → 强制清除**)。 5. **真机调试** - 在开发者工具中正常,但真机异常?可能是真机网络问题或域名未配置。 - 真机调试时,勾选 **“不校验合法域名”**(仅限开发测试)。 6. **后端配置 CORS** - 确保服务器响应头包含: ```http Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, OPTIONS Access-Control-Allow-Headers: Content-Type ``` 7. **简化请求测试** - 写一个最简单的请求代码(如直接调用 `wx.request`),排除其他代码干扰。 --- ### **示例代码检查** ```javascript wx.request({ url: 'https://api.example.com/data', // 必须是 HTTPS method: 'GET', success(res) { console.log('响应数据:', res.data); }, fail(err) { console.error('请求失败:', err); } }); ``` --- ### **总结** 大多数情况下,此问题是由于 **域名未配置、HTTPS 缺失或跨域限制** 导致的。优先检查小程序后台的域名配置和服务器 CORS 设置,再逐步排查代码逻辑和网络环境。如果问题仅在开发者工具出现,可尝试重启工具或更新版本。
评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值