移动体验 / 方法解读

移动端 fetch 跨域请求报错:服务器响应头 Access-Control-Allow-Methods 缺失或错误

当移动端 fetch 跨域请求报错找不到 Access-Control-Allow-Methods 响应头时,通常是因为服务器未配置允许的 HTTP 方法列表,或者请求使用的 HTTP 方法未被包含在该列表中。

展示CORS跨域资源共享的原理图示,包含浏览器、服务器和请求流程的示意图
主题资料配图,非新闻现场照片 · 配图:cors 详细介绍

检查响应头是否包含 Access-Control-Allow-Methods

在移动端浏览器开发者工具的 Network 面板中,找到失败的跨域请求,点击查看 Response Headers。确认是否存在 Access-Control-Allow-Methods 这个响应头。如果该响应头完全不存在,说明服务器未配置 CORS 预检请求的允许方法列表。如果该响应头存在但值为空,或者格式不正确,也会导致浏览器无法识别允许的方法。

打开浏览器的开发者工具,切换到 Network 标签页,刷新页面并触发跨域请求。点击该请求,在右侧面板的 Headers 选项卡中向下滚动,寻找 Access-Control-Allow-Methods。如果未找到该字段,或者该字段值不是逗号分隔的合法 HTTP 方法列表(如 GET, POST, PUT),则说明服务器配置存在问题,导致浏览器无法通过预检请求。

确认请求使用的 HTTP 方法是否在允许列表中

根据资料,Access-Control-Allow-Methods 响应头指定了使用 CORS 访问该 URL 时允许使用的 HTTP 方法列表。如果请求使用的 HTTP 方法不在该列表中,就会报错。例如,如果响应头只允许 GET 和 POST,而代码使用了 PUT 方法,就会触发错误。确保代码中使用的 HTTP 方法与服务器响应头中列出的方法一致。

在开发者工具的 Network 面板中,查看该请求的 Request Headers,确认 Request Method 是什么(例如 GET, POST, PUT, DELETE)。然后对比服务器返回的 Access-Control-Allow-Methods 响应头中的值。如果请求方法不在响应头列出的逗号分隔列表中,就需要修改服务器配置,将该方法添加到允许列表中,或者修改前端代码使用允许的方法。

排查响应头中是否存在非法或未定义的方法名称

服务器在 Access-Control-Allow-Methods 响应头中包含未识别或未定义的方法名称时,会引发另一种错误。这种情况下,浏览器会报错提示响应头中存在无效的 token。这意味着服务器配置了不存在的 HTTP 方法,导致预检请求失败。需要检查服务器配置,移除所有非标准或未定义的 HTTP 方法名称。

如果开发者工具中显示的错误信息是 Reason: invalid token 'xyz' in CORS header 'Access-Control-Allow-Methods',说明服务器在响应头中写了 'xyz' 这样的非法方法名。这通常是因为配置错误或使用了非标准的 HTTP 方法。请检查服务器端的 CORS 配置代码,确保 Access-Control-Allow-Methods 响应头中只包含标准的 HTTP 方法,如 GET, POST, PUT, DELETE 等。

验证修复后的配置是否生效

修改服务器配置后,需要重新触发跨域请求来验证修复结果。刷新页面或重新发送请求,再次在 Network 面板中查看该请求的 Response Headers。确认 Access-Control-Allow-Methods 响应头已正确返回,且包含正确的 HTTP 方法列表。同时,确认请求成功完成,不再报错。如果请求仍然失败,请检查服务器日志,确认配置是否正确保存并生效。

完成配置修改后,刷新移动端页面或重新执行触发跨域请求的操作。在 Network 面板中观察该请求的状态。如果请求成功,说明 Access-Control-Allow-Methods 响应头配置正确,且请求方法在允许列表中。如果请求仍然失败,请检查服务器日志,确认配置更改已生效,并确认请求方法确实在允许列表中。

资料与延伸阅读

你可以通过以下原始资料核对文中概念,并继续深入阅读。

  1. Reason: Did not find method in CORS header 'Access-Control-Allow-Methods' - HTTP | MDN ↗
  2. 配图:cors 详细介绍 ↗
← 更多移动体验文章返回顶部 ↑