移动端跨域请求预检报错 invalid token 'xyz' 怎么排查
服务器返回的 Access-Control-Allow-Headers 头部包含无效名称会导致预检请求失败。
错误现象与触发条件
当移动端发起跨域请求时，浏览器会先发送一个 OPTIONS 预检请求。服务器在响应这个预检请求时，会通过 Access-Control-Allow-Headers 头部声明允许客户端在后续请求中使用的自定义 HTTP 头部。如果该头部中包含的某个名称在浏览器中无法识别，或者不符合 HTTP 头部命名规范，浏览器就会报错并阻止后续的实际请求。
这种错误通常发生在服务器配置了 Access-Control-Allow-Headers，但其中包含了一些拼写错误、使用了非法字符或者使用了浏览器不支持的头部名称。例如，如果配置中包含了 'xyz' 这样的无效名称，客户端代理在解析时会直接报错。这通常不是客户端代码的问题，而是服务器端配置需要调整。
服务器端配置检查步骤
首先，需要确认服务器是否正确配置了 Access-Control-Allow-Headers。在服务器端，检查相关的 CORS 配置模块，确保该头部中列出的所有名称都是有效的 HTTP 头部名称。例如，如果需要发送自定义头部，应确保名称符合标准，如 'X-Custom-Header'。同时，检查是否有拼写错误或多余的空格导致名称无效。
其次，验证服务器是否正确响应了预检请求。可以使用网络抓包工具查看服务器对 OPTIONS 请求的响应内容，确认 Access-Control-Allow-Headers 头部是否存在以及其值是否正确。如果服务器配置了多个允许的头部，请确保它们之间用逗号正确分隔，且没有包含无效的名称。修改服务器配置后，需要重新部署并清除缓存，以确保新的配置生效。
修复方法与验证结果
修复方法主要是修改服务器配置，移除 Access-Control-Allow-Headers 头部中的无效名称。确保服务器只发送浏览器能够识别的头部名称。例如，如果配置中原本包含 'xyz'，应将其删除或替换为有效的头部名称。修改完成后，重新部署服务器配置，并清除客户端的缓存，然后再次尝试发起跨域请求。
在验证修复结果时，可以在移动端浏览器中重新发起请求，观察控制台是否还有报错信息。如果不再出现关于 Access-Control-Allow-Headers 包含无效令牌的错误，说明问题已解决。此外，也可以使用浏览器的开发者工具查看网络请求的响应头，确认 Access-Control-Allow-Headers 的值已经更新为正确的配置。
客户端环境与日志排查
虽然问题主要出在服务器端，但客户端的 HTTP 库或浏览器版本也可能影响错误的表现。确保客户端使用的 HTTP 库或浏览器版本是最新的，以避免因旧版本不支持某些头部名称而导致误判。如果问题依然存在，可以尝试使用不同的客户端工具或浏览器进行测试，以排除特定客户端环境的问题。
最后，建议检查服务器日志，查看是否有关于 CORS 配置或预检请求的记录。服务器日志可以帮助确认请求是否到达服务器以及服务器返回的具体响应内容。通过结合服务器日志和客户端的错误信息，可以更准确地定位问题所在，确保服务器配置与客户端请求完全匹配。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。