本地localhost访问远程PHP API遭遇CORS跨域问题求助

嘿，这个问题我帮别人排查过好多次，尤其是共享主机这种服务器配置受限的场景，浏览器的CORS拦截确实头疼。给你几个实操性强的解决方案，按顺序试应该能搞定：

1. 直接在PHP API代码里添加CORS响应头（最可靠） #

共享主机大多没法改服务器全局配置，所以在你的PHP API入口文件最顶部加这段代码，一定要放在任何输出之前（包括空格、HTML标签、echo语句），不然会因为头已经发送而失效：

<?php
// 开发环境允许本地React访问，生产环境记得换成你的前端域名（比如https://your-frontend.com）
header("Access-Control-Allow-Origin: http://localhost:3000");
// 允许常用的请求方法，根据你的API需求调整
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
// 允许前端发送的请求头，比如Content-Type、自定义授权头
header("Access-Control-Allow-Headers: Content-Type, Authorization");

// 处理浏览器的OPTIONS预检请求：浏览器会在发送实际请求前先OPTIONS探路，必须返回200
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200);
    exit();
}

// 下面写你的API业务逻辑
?>

为什么要处理OPTIONS？因为如果你的请求带自定义头或者非GET/POST的方法，浏览器会先发OPTIONS预检，要是服务器没正确响应，直接就拦截了。

2. 用.htaccess配置（Apache服务器适用） #

如果你的共享主机用的是Apache，并且允许修改.htaccess文件，在你的API目录下创建/编辑.htaccess文件，添加以下内容：

# 设置CORS头
Header set Access-Control-Allow-Origin "http://localhost:3000"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"

# 拦截OPTIONS请求并返回200
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

⚠️ 注意：有些共享主机禁用了mod_headers模块，加了之后会500错误，这种情况就换回第一种方法。

3. 本地开发用React代理绕过CORS #

开发阶段可以让React帮你代理请求，不用改服务器配置。在项目根目录的package.json里加一行：

"proxy": "https://your-shared-host-api-domain.com"

然后你调用API的时候，直接用相对路径，比如：

// 原来的写法：fetch('https://your-shared-host-api-domain.com/api/user')
// 现在改成：
fetch('/api/user')

这样React会在本地启动一个代理服务器，把请求转发到你的API，绕过浏览器的CORS检查，开发时用特别方便。

常见坑点排查 #

• 头的位置不对：一定要在PHP的任何输出之前设置header，哪怕文件开头多了个空格都会导致头发送失败，浏览器还是会报CORS错误。
• 共享主机缓存：有些主机有页面缓存，修改PHP或.htaccess后，可能需要等几分钟或者在主机后台清缓存才能生效。
• 协议不匹配：如果你的API是HTTPS，而本地React是HTTP（localhost:3000默认是HTTP），有些浏览器会严格拦截，这种情况要么API临时允许HTTP，要么本地React用HTTPS启动（可以用HTTPS=true npm start）。
• 权限问题：确保你的PHP文件权限是服务器能执行的（一般是755或644），有些共享主机会拦截权限不对的脚本。

内容的提问来源于stack exchange，提问作者TheLettuceMaster