移动端 fetch 跨域请求预检报错 invalid token 怎么排查
浏览器在发送跨域预检请求时，若服务器响应头 Access-Control-Allow-Headers 中包含无效的令牌名称，会导致预检失败并报错 invalid token。
确认预检请求的触发条件
浏览器在发起跨域请求前，会先发送一个 OPTIONS 请求来检查服务器是否允许该请求。只有当请求使用了非简单请求的方法或自定义头部时，才会触发预检。例如，使用 POST 方法并设置 Content-Type 为 text/xml，或者添加了 X-PINGOTHER 等非标准头部，都会强制浏览器进行预检。
在移动端调试时，可以通过浏览器开发者工具的 Network 面板查看请求详情。如果请求方法是 OPTIONS 且状态码为 200，说明预检请求已发出。如果状态码为 405 或 400，则说明服务器未正确响应预检请求，或者响应头中包含了无效的令牌。确认触发预检是排查错误的第一步。
检查 Access-Control-Allow-Headers 响应头配置
服务器必须在响应中包含 Access-Control-Allow-Headers 头部，并明确列出允许使用的自定义请求头。该头部是一个逗号分隔的列表，列出的每个令牌都必须与客户端实际发送的请求头名称完全匹配。如果列表中包含无效的令牌名称，浏览器会拒绝实际的请求并报错 invalid token。
排查时需对比客户端发送的请求头与服务器响应头。例如，客户端发送了 X-PINGOTHER 和 Content-Type，服务器响应头必须包含 Access-Control-Allow-Headers: X-PINGOTHER, Content-Type。如果服务器错误地包含了无效的令牌，或者遗漏了必要的令牌，都会导致预检失败。
验证令牌名称的大小写与拼写
HTTP 头部名称是区分大小写的。在配置 Access-Control-Allow-Headers 时，必须确保令牌名称的大小写与客户端实际发送的请求头完全一致。例如，如果客户端发送的是 X-Custom-Header，服务器响应头必须包含 Access-Control-Allow-Headers: X-Custom-Header，而不能是 x-custom-header。
常见的拼写错误包括遗漏连字符、使用了错误的单词或使用了无效的字符。在移动端开发中，由于键盘输入或代码复制粘贴，容易出现此类错误。建议使用代码编辑器的自动补全功能，并仔细检查每个字符，确保令牌名称的准确性。
查看浏览器控制台的具体错误信息
当预检失败时，浏览器控制台会显示具体的错误信息，帮助定位问题。错误信息通常会指出哪个令牌无效，例如 invalid token 'X-Invalid-Header'。这是判断服务器响应头配置是否正确的直接依据。
在移动端浏览器中，可以通过开发者工具的 Console 面板查看错误日志。如果错误信息提示令牌无效，应立即检查服务器配置的 Access-Control-Allow-Headers 头部，确保其中包含正确的令牌名称。如果错误信息不明确，可以尝试移除所有自定义头部，仅保留标准头部，逐步排查问题所在。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。