移动端跨域请求预检失败？检查 Sec-Fetch-Mode 头部配置
当移动端跨域请求预检失败时，应检查服务器是否正确响应了 Sec-Fetch-Mode 头部配置。
确认请求模式与跨域策略的匹配关系
Sec-Fetch-Mode 头部指示了请求的模式，其常见值包括 navigate、no-cors、cors 和 same-origin。当请求是跨域的，且服务器必须响应适当的 CORS 头部时，请求模式应为 cors。如果服务器未正确配置以响应 cors 模式的跨域请求，请求将会失败。对于从 JavaScript 使用 fetch API 发起的跨域请求，如果请求者需要访问返回的资源，通常需要 cors 模式。
浏览器在发送跨域请求时，会根据上下文自动设置 Sec-Fetch-Mode 的值。例如，页面加载子资源如图片、字体、脚本和样式表时，默认使用 no-cors 模式。这种模式下，允许跨域而不需要服务器发送适当的 CORS 头部，但响应不能被 JavaScript 访问。如果服务器期望处理这类请求并返回可访问的数据，必须确保请求模式与服务器配置的 CORS 策略相匹配。
排查预检请求的返回状态
预检请求通常是一个 OPTIONS 请求，用于检查服务器是否允许实际的跨域请求。服务器必须正确响应预检请求，并在响应中包含 Access-Control-Allow-Origin 等头部。如果服务器配置了严格的资源隔离策略，可能会拒绝某些模式的请求。例如，代码示例中仅允许 same-origin、none 以及 navigate 模式的请求，其他请求将被拒绝。
在排查问题时，应检查服务器日志中预检请求的返回状态码。如果返回 403 Forbidden，可能是因为请求的 Sec-Fetch-Mode 不在允许的策略范围内。服务器需要根据请求的头部信息动态调整响应策略。确保服务器能够识别并处理 cors 模式的跨域请求，是解决预检失败的关键步骤。
验证响应头部的完整性
服务器在响应跨域请求时，必须包含 Access-Control-Allow-Origin 等必要的 CORS 头部。这些头部告诉浏览器该资源是否可以被跨域访问。如果服务器未正确设置这些头部，浏览器将阻止客户端访问响应内容。对于 cors 模式的请求，服务器必须明确允许跨域访问，否则请求将失败。
除了 CORS 头部，服务器还应考虑发送 Vary 响应头部，以指示响应内容依赖于 Sec-Fetch-Mode 等请求头部。这有助于缓存机制正确处理不同模式的请求。确保响应头部的完整性和正确性，可以避免因头部配置错误导致的跨域请求失败。
检查请求上下文与来源关系
Sec-Fetch-Site 头部指示了请求者与资源之间的关系，例如是否同源、同站或跨站。虽然此问题主要关注 Sec-Fetch-Mode，但请求的上下文也会影响跨域策略的实施。例如，直接用户发起的请求（如点击链接或输入 URL）与脚本发起的请求在策略上可能有不同的处理方式。服务器应根据这些上下文信息灵活调整允许的策略。
在移动端开发中，确保请求的上下文信息被正确传递和处理，有助于构建更安全的跨域策略。服务器应结合 Sec-Fetch-Mode 和 Sec-Fetch-Site 等头部信息，制定合理的资源访问规则。这样可以有效防御跨站请求伪造（CSRF）等攻击，同时保证正常的跨域访问需求。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。