移动端跨域请求预检失败？检查 Access-Control-Allow-Origin 头部配置
移动端跨域请求预检失败时，应重点检查服务器返回的 Access-Control-Allow-Origin 头部是否包含当前页面的源地址。
确认请求源与响应头不匹配的原因
移动端发起跨域请求时，浏览器会先发送预检请求。如果预检请求的源地址与服务器配置的允许源不一致，就会报错。错误提示通常明确指出源地址不匹配。这意味着服务器只允许特定的源访问，而当前页面的源不在允许列表中。这种情况常见于移动端混合开发或 iframe 嵌套场景。
除了源地址不匹配，响应头中包含多个 Access-Control-Allow-Origin 头部也会导致问题。浏览器要求该头部只能出现一次，且只能包含一个源地址。如果配置文件中错误地重复添加了该指令，或者代码逻辑生成了多个响应头，预检请求就会失败。这通常发生在服务器配置文件或中间件代码中，需要仔细检查配置的完整性。
在 Apache 服务器上配置允许的源地址
如果使用 Apache 服务器，需要在配置文件中添加 Access-Control-Allow-Origin 指令。该指令通常位于 Directory、Location、Files 或 VirtualHost 等配置段内。配置文件可能位于 .conf 文件中，如 httpd.conf 或 apache.conf，也可能在 .htaccess 文件中。添加指令时，必须确保源地址包含完整的协议，例如 http 或 https。
在 Apache 配置中，添加指令的格式是 Header set Access-Control-Allow-Origin 'origin'。这里的 origin 需要替换为实际的源地址。例如，如果允许的源是 https://example.com，则配置应为 Header set Access-Control-Allow-Origin 'https://example.com'。配置修改后，需要重启服务器或重新加载配置才能生效。
在 Nginx 服务器上配置允许的源地址
对于 Nginx 服务器，配置允许的源地址需要使用 add_header 指令。该指令通常放在 server 或 location 块中。同样，源地址必须包含完整的协议前缀。Nginx 的配置语法简洁，直接在响应头中设置该字段即可。确保该指令位于 location 块中，以便对特定的路径生效。
在 Nginx 中，配置指令的格式是 add_header 'Access-Control-Allow-Origin' 'origin'。这里的 origin 同样需要替换为具体的源地址。例如，允许的源为 https://example.com，则配置为 add_header 'Access-Control-Allow-Origin' 'https://example.com'。配置完成后，需要重新加载 Nginx 配置或重启服务，使更改对移动端请求生效。
验证配置结果的方法
验证配置是否生效，可以使用浏览器开发者工具的 Network 面板。在移动端或模拟移动端环境下，发起跨域请求。查看预检请求的响应头，确认 Access-Control-Allow-Origin 的值是否与当前页面的源地址一致。如果值匹配，说明配置正确。如果不匹配或响应头缺失，说明配置未生效或配置错误。
如果响应头中出现了多个 Access-Control-Allow-Origin，说明配置有误。需要检查服务器配置文件，确保该指令只出现一次。同时，确认该指令只包含一个源地址。通过对比配置文件中的指令与实际响应头，可以快速定位问题所在，确保移动端跨域请求能够正常通过预检。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。