移动端 fetch 跨域请求报错：服务器响应头 Access-Control-Allow-Origin 重复发送
当移动端 fetch 请求报错时，应重点检查服务器响应头 Access-Control-Allow-Origin 是否被重复发送。
确认响应头是否被重复发送
移动端 fetch 请求报错时，浏览器通常会提示响应头 Access-Control-Allow-Origin 被重复发送。服务器在响应中发送了多个 Access-Control-Allow-Origin 头部，这违反了跨域资源共享协议的规范。浏览器只允许在响应中包含一个 Access-Control-Allow-Origin 头部，或者不包含该头部。如果服务器配置了多个 Access-Control-Allow-Origin 头部，浏览器会拦截该响应并报错。
排查时需要检查服务器端的配置文件或代码逻辑。确认是否有多个地方设置了 Access-Control-Allow-Origin 头部，或者是否有中间件、插件重复添加了该头部。例如，在 Nginx 配置中，可能存在多个 location 块或 header 指令重复定义了该头部。在代码层面，可能存在多个函数或模块都调用了设置响应头的操作。找到重复设置的位置后，删除多余的配置，确保只保留一个 Access-Control-Allow-Origin 头部。
检查响应头值的格式与有效性
除了重复发送外，响应头 Access-Control-Allow-Origin 的值也必须符合规范。浏览器只接受单个源或 null 作为该头部的值，不能发送源列表。如果服务器配置错误，将多个源用逗号分隔发送，或者发送了无效的源字符串，浏览器也会报错。例如，将 Access-Control-Allow-Origin 设置为 *（通配符）时，虽然允许所有源访问，但通常需要配合其他头部使用，且不能用于携带凭证。
验证响应头值是否正确的方法是使用浏览器的开发者工具。在 Network 面板中找到失败的请求，查看 Response Headers 部分。确认 Access-Control-Allow-Origin 的值是否为单一的源地址，例如 https://example.com，或者是 null。如果值是 *，请确认这是否符合业务需求。如果值是其他格式或列表，需要修改服务器配置，将其改为单一的源地址。确保源地址的格式正确，包含协议、域名和端口。
排查服务器配置与代码逻辑
服务器配置错误是导致 Access-Control-Allow-Origin 头部重复或格式错误的主要原因。在排查时，应首先检查服务器软件的配置文件。例如，对于 Apache 服务器，检查 .htaccess 文件或主配置文件中的 Header 指令；对于 Nginx 服务器，检查 nginx.conf 文件中的 add_header 指令。确保没有在多个配置块中重复定义该头部，或者使用了错误的指令语法。
在代码层面，需要检查应用程序的代码逻辑。如果使用的是后端框架，如 Node.js 的 Express、Python 的 Flask 或 Java 的 Spring Boot，检查中间件或控制器代码中是否重复设置了该头部。例如，在 Express 中，可能同时使用了 cors 中间件和手动设置的 res.header。手动设置的代码可能覆盖了中间件的效果，或者两者叠加导致了重复。找到重复设置的位置后，删除多余的代码，确保只保留一个设置 Access-Control-Allow-Origin 头部的逻辑。
验证修复后的请求结果
完成配置修改后，需要验证修复是否有效。在移动端浏览器中重新发起 fetch 请求，或者使用浏览器的开发者工具模拟移动端环境。观察 Network 面板中该请求的响应状态和 Response Headers。确认 Access-Control-Allow-Origin 头部只出现一次，且值符合规范。如果请求成功，浏览器不再报错 CORS request not HTTP，说明问题已解决。
如果请求仍然失败，需要进一步检查其他可能的错误原因。例如，检查服务器是否正确返回了 HTTP 状态码，而不是非 HTTP 响应。确认服务器是否正确处理了预检请求（OPTIONS 请求）。如果服务器返回了非 HTTP 响应，或者预检请求失败，也会导致 fetch 请求报错。使用开发者工具的 Console 面板查看详细的错误信息，以便进一步定位问题。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。