Instagram iOS内置浏览器Fetch请求报'Load failed'但服务端已处理

问题描述 #

我在WordPress站点中使用一个表单，数据会异步发送至wp-ajax.php。该功能在所有浏览器中均可正常运行，但在iOS系统的Instagram应用内置浏览器中，我收到了“Load failed”的错误提示。有意思的是，请求仍能送达服务器并被正确处理。

表单提交代码 #

document.querySelector('.gm_courseform').addEventListener('submit', function(event) {
    event.preventDefault();

    const form = this;
    form.classList.add('sending');

    const submitButton = document.getElementById('submit_button');
    const originalButtonText = submitButton.textContent;
    submitButton.disabled = true;
    submitButton.textContent = "Wird geladen...";
    document.querySelectorAll(".form-message").forEach(el => el.remove());
    const formData = new FormData(this);
    formData.append('action', 'create_booking');

    fetch("<?php echo admin_url('admin-ajax.php'); ?>", {
            method: "POST",
            headers: {
                "Cache-Control": "no-cache, no-store, must-revalidate",
                "Pragma": "no-cache",
                "Expires": "0"
            },
            body: formData,
        })
        .then(response => response.json())
        .then(data => {
          // 后续处理逻辑
        })
        .catch(error => {
         // 错误处理逻辑
    });
});

可能的原因分析 #

• Instagram WebView的CORS校验严格：尽管请求成功到达服务器，但Instagram内置浏览器的WebView对响应的CORS头有额外限制。比如服务器返回的Access-Control-Allow-Origin如果没有包含Instagram的域名，或者使用通配符*但被WebView拦截，就会触发前端fetch的错误回调，哪怕实际请求已经完成。
• 响应内容解析失败：如果服务器返回的Content-Type不是标准的application/json，或者响应内容存在语法错误、编码问题，Instagram的WebView无法完成response.json()的解析，直接进入catch块抛出错误，但服务器已经处理了请求数据。
• 缓存头的兼容性问题：你设置的no-cache等缓存头，在Instagram内置浏览器中可能存在处理bug。浏览器层面判定请求缓存相关异常，抛出“Load failed”，但服务器已经正常接收并处理了请求。可以尝试移除这些自定义缓存头，使用fetch的默认配置测试。
• 平台网络拦截策略：Instagram可能对站内请求做安全扫描，WebView会提前判定请求“失败”，但实际上请求已经到达服务器并完成处理。这种属于平台层面的限制，可以尝试改用XMLHttpRequest替代fetch，看看是否能规避该问题。
• 响应超时阈值差异：Instagram内置浏览器的请求超时阈值比常规浏览器更低，如果服务器处理请求的时间稍长，WebView会提前抛出超时错误，但服务器后续完成了请求处理。可以检查服务器响应时间，或者在前端为fetch添加超时配置。

内容的提问来源于stack exchange，提问作者dagrega