移动体验 / 方法解读

移动端跨域请求重复预检导致失败?检查单次预检逻辑

移动端浏览器发起跨域请求时,若代码未优化导致重复发送预检请求,会因协议限制被拦截。

微信小程序开发中wx.request请求连接服务器失败的网络错误提示界面截图
主题资料配图,非新闻现场照片 · 配图:wx.request部分用户出现连接不上服务器,err connection reset?

确认预检请求是否重复发送

移动端浏览器在处理跨域请求时,若请求包含自定义头或非简单方法,会先发送 OPTIONS 预检请求。若代码逻辑未优化,可能在同一连接中多次尝试发送预检,导致协议冲突。根据资料,重复的预检请求不被允许,浏览器会拦截后续请求。需在移动端调试模式下,通过开发者工具的网络面板观察 OPTIONS 请求的发送频率,确认是否存在重复发送的情况。

排查时,应检查客户端代码中的请求逻辑。若每次发起跨域请求都重新触发预检,而非复用已建立的连接,则可能导致问题。移动端网络环境不稳定,频繁的预检请求可能因网络错误而失败。需确保代码逻辑中每个连接只进行一次预检,避免重复发送导致冲突。若发现多次发送 OPTIONS 请求,需优化代码逻辑,确保预检请求仅在首次跨域请求时发送。

验证预检请求的发送时机

预检请求的发送时机是排查问题的关键。资料指出,若跨域请求已执行过预检,再次执行预检是不被允许的。需确认代码是否在每次请求时都尝试发送预检,而非仅在首次请求时发送。例如,若代码在每次点击按钮或刷新页面时都重新发起跨域请求,且未正确处理预检状态,则可能导致重复预检。移动端测试时,需模拟用户操作,观察预检请求的触发时机。

验证时,可使用浏览器开发者工具的 Network 面板,切换到移动端调试模式。找到跨域请求对应的 OPTIONS 请求,查看其响应状态和发送时间。若发现同一连接下有多个 OPTIONS 请求,需检查代码逻辑。确保代码在首次跨域请求时发送预检,后续请求复用连接。若服务器未正确处理预检请求,或返回错误状态码,也可能导致预检失败。

检查网络环境与服务器响应

预检请求失败可能源于网络错误或服务器响应异常。资料提到,预检请求可能因任何种类的网络错误而失败。移动端网络环境复杂,弱网或不稳定连接可能导致预检请求超时或丢失。需检查移动端网络环境,确认是否有连接超时或服务器无响应的情况。若服务器未正确处理 OPTIONS 请求,返回 405 或 500 错误,也会导致预检失败。

排查时,可模拟移动端弱网环境,观察预检请求的发送频率和响应状态。若发现预检请求因网络错误而失败,需优化网络请求逻辑,如增加重试机制或使用缓存记录预检状态。同时,检查服务器端是否正确配置 CORS 策略,确保对预检请求返回正确的响应头和状态码。若服务器未配置 CORS,预检会失败。

优化代码逻辑避免重复预检

优化代码逻辑是解决重复预检问题的核心。资料建议,确保代码只预检一次。需检查客户端代码,确保预检请求仅在首次跨域请求时发送,后续请求复用连接。例如,可使用缓存机制记录预检状态,避免重复发送。移动端测试时,需确认代码逻辑在不同网络环境下的一致性,避免因网络波动导致重复预检。

验证优化效果时,可再次使用浏览器开发者工具的 Network 面板,观察预检请求的发送频率。若优化成功,同一连接下应只发送一次 OPTIONS 请求。同时,检查服务器端日志,确认预检请求是否被正确处理。若服务器未配置 CORS,需修改服务器配置,确保对预检请求返回正确的响应头。

资料与延伸阅读

你可以通过以下原始资料核对文中概念,并继续深入阅读。

  1. Reason: CORS preflight channel did not succeed - HTTP | MDN ↗
  2. 配图:wx.request部分用户出现连接不上服务器,err connection reset? ↗
← 更多移动体验文章返回顶部 ↑