关于浏览器请求PHP一次请求执行了两次

在解决一个由测试同学反馈的重复创建数据的Bug过程中,开发者经历了一系列排查,从前端到后端,最终发现罪魁祸首竟然是Chrome浏览器的一个自动刷新插件,导致了看似单一请求却执行两次的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

测试同学今天又双叒反馈了一个Bug

继上次解决了重复请求的问题之后,本来就以为可以万事大吉了,没想到我还是太年轻了,测试同学说,不行啊,老哥,你这个我点击了一次创建居然创建出来两条数据!!并且查看日志的时候,确实是发了两次网络请求!!!

我:?????

真是让人头秃啊

排查

1.先看看是不是JS的问题,我们看一下network跟踪一下,没有啊,这只发送了一个请求,挠头,继续,

2.好的,我去我的工位上复现一下,在JS处打断点,没有啊,ajax这里只进来一次,好吧,继续查,

3.好的,把host地址改向测试机,请求,我擦,日志正常,结果也正常是一条数据啊,根本没办法复现啊。

这。。。It works on my computer ! 这就非常的有趣了,测试同学和我访问的都是同一台测试机,为什么,我创建没问题,他创建就有问题呢。好奇怪,首要之急要解决问题的话,就避免重复请求,在代码里判断一下请求间隔。可是不应该啊,有这么麻烦么?我不死心啊?

猜想&&解决

讲道理,没道理一个请求到后边代码会执行两次的,会不会是有个多个进程的原因?我们重启一下NGINX好了,在服务机上执行

/etc/init.d/nginx resatrt

测试大哥,快执行一下试试,诶,好了耶。

好的,完美。

20190128

不得不来补充点东西

本来以为就是这样只是进程被卡住的原因,然而并没有,测试大哥后来多次给我反馈,在我还没有说话的时候就回,我重启了,没用!

好吧好吧,这个问题本来就是我们偷懒了,按说我们是应该在测试服务器上打日志,看一下代码走进来多少次的,额。。。

后来测试大哥有一次反馈这个问题,我觉得问题实在是严峻到了不得不解决的时候,重新排查,在数次复现无果之后,network也只有一次请求。我回复测试大哥,大哥,要不咱们换个浏览器?

换一个,OK,没有再重复了。很好,换回chrome,我擦又重复了。

老哥,检查一下你chrome的插件,好吧,我们打开拓展程序,一个诡异的插件映入眼帘

页面自动刷新

我擦,这是什么东西???停掉,快停掉!再试一下,果真没有重复数据的问题了。

F**king ! ! !

### UniApp中Request方法因请求两次而导致PHP端跨域问题的解决方案 在UniApp开发过程中,`request` 方法可能会因为浏览器的安全策略而触发预检请求(OPTIONS),从而导致PHP端出现跨域问题。以下是针对该问题的具体分析与解决办法。 #### 1. 跨域问题的本质 当一个请求URL的协议、域名或端口号中的任何一个与当前页面URL不一致时,就会引发跨域问题[^2]。这种情况下,浏览器会自动发起一次预检请求(OPTIONS),用于确认服务器是否允许实际的请求操作。 #### 2. ThinkPHP5.1 的跨域配置 为了支持 uni-app H5 应用的跨域访问,在 ThinkPHP5.1 中可以通过修改中间件来实现全局跨域处理: ```php // application/middleware/Cors.php 文件 namespace app\middleware; class Cors { public function handle($request, \Closure $next) { header('Access-Control-Allow-Origin: *'); // 允许任何来源访问 (*表示全部) header('Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT'); // 允许访问的方法 header('Access-Control-Max-Age: 3600'); // 预检请求的有效期,单位为秒 header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization'); if ($request->isOptions()) { // 如果是OPTIONS请求,则直接返回成功状态码 return json(['code' => 200]); } return $next($request); } } ``` 上述代码通过设置 HTTP 响应头 `Access-Control-Allow-*` 来声明哪些资源可以被外部站点访问,并拦截所有的 OPTIONS 请求以避免其影响正常业务逻辑[^1]。 #### 3. 设置正确的Content-Type 如果前端发送的数据编码方式与后端接收数据解码方式不同,也可能引起异常行为。因此建议统一设定请求头字段 `Content-Type` 为 `application/json; charset=UTF-8` 或其他适合的形式[^3]。例如: ```javascript uni.request({ url: 'https://example.com/api', method: 'POST', data: JSON.stringify({ key: value }), header: { 'content-type': 'application/json;charset=utf-8' }, success(res) { console.log(res.data); } }); ``` 以上代码片段展示了如何显式指定 content type 并序列化参数体为标准JSON字符串形式传递给服务端解析。 #### 4. 使用JSONP作为替代方案 尽管现代 Web 开发更倾向于基于 CORS 实现跨域资源共享机制,但在某些特殊场景下仍然可以选择使用 JSONP 技术完成类似的异步调用需求。不过需要注意的是,由于 JSONP 只能执行GET类型的查询动作,所以它并不适用于所有情况下的 API 设计。 --- ### 总结 综上所述,对于 UniApp 中 request 方法可能引起的 PHP 端跨域问题,主要可以从以下几个方面入手加以改善: - 修改框架层面的支持能力(如调整 ThinkPHP 的响应头部信息); - 明确双方交互过程中的媒体类型定义规则; - 根据具体应用场景考虑引入额外的技术手段比如 JSONP。 最终目的是让前后两端能够顺利沟通交流而不受制于安全沙箱限制所带来的不便之处。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值