移动端 fetch 跨域请求为何报错 CORS preflight channel did not succeed

检查代码是否在单次连接中重复发送预检请求

浏览器对跨域请求的预检机制有限制，如果代码在同一个连接中已经执行过一次预检，再次发送会被禁止。这通常发生在请求被重试或代码逻辑错误地触发了多次预检。确保代码逻辑正确，避免在单次连接中重复发起预检请求。

排查时，在移动端浏览器的开发者工具中查看 Network 面板。找到对应的 fetch 请求，观察是否存在重复的 OPTIONS 预检请求。如果发现同一个请求被多次触发，检查代码逻辑，确保只在必要时发送预检请求。

预检请求本身可能因为网络问题而失败，导致后续的实际请求无法发送。这包括网络连接中断、DNS 解析失败或服务器无响应等情况。网络错误会直接导致预检通道无法建立，从而报错 CORS preflight channel did not succeed。

验证时，在 Network 面板中查看预检请求的详细信息。检查请求的状态码和响应内容，确认是否存在网络错误或服务器返回的错误信息。如果预检请求失败，尝试切换网络环境或检查服务器状态，排除网络问题。此外，还可以使用 curl 命令模拟请求，检查服务器是否正确响应预检请求。

服务器必须正确处理预检请求，并返回允许跨域的响应头。如果服务器未正确配置或返回错误状态码，浏览器会认为预检失败，从而阻止实际请求。确保服务器配置正确，能够处理 OPTIONS 请求并返回必要的 CORS 响应头。

检查服务器配置，确保 OPTIONS 请求能够被正确处理。查看服务器日志，确认 OPTIONS 请求是否被正确接收。检查响应头，确保包含 Access-Control-Allow-Origin 等关键头部。如果服务器未正确配置，修改服务器配置以允许跨域请求。

首先，在移动端浏览器中打开开发者工具，切换到 Network 面板。找到对应的 fetch 请求，点击查看详情。在 Headers 面板中，查看 Request URL 和 Response Headers，确认是否存在网络错误或响应头缺失。如果预检请求失败，检查网络连接和服务器状态。

验证结果的方法是，在服务器端添加日志，记录 OPTIONS 请求的详细信息。检查服务器是否正确处理了预检请求，并返回了正确的响应头。如果服务器未正确处理，修改服务器配置。此外，还可以尝试使用 curl 命令模拟请求，检查服务器是否正确响应预检请求。