React应用从localhost请求Apigility接口触发CORS 403错误解决方案咨询

问题本质 #

你遇到的403错误并非浏览器CORS策略拦截导致，而是Apigility服务端自身配置的Origin白名单校验未通过：

• 直接在地址栏访问、curl、接口测试工具请求时，请求头不带Origin字段，不会触发Apigility的Origin校验，因此返回200正常结果
• 前端fetch发起跨域请求时会自动携带Origin头，Apigility校验发现请求的Origin不在白名单内，直接返回403，即使响应头携带了Access-Control-Allow-Origin: *也不生效

可行解决方案（除CRA自带代理外） #

1. 调整Apigility服务端配置（最推荐，一劳永逸） #

Apigility自带zf-cors组件管理跨域规则，你可以通过两种方式修改配置：

• 后台可视化配置：登录Apigility管理后台，找到「CORS Settings」配置项，将本地开发地址http://localhost:3000、http://localho.st:5000添加到Allowed Origins列表，保存后重启服务即可。
• 直接修改配置文件：找到服务端config/autoload/目录下的zf-cors.global.php配置文件，修改allowed_origins参数：

return [
    'zf-cors' => [
        // 追加本地开发域名到允许列表，也可直接写["*"]允许所有来源
        'allowed_origins' => ['http://localhost:3000', 'http://localho.st:5000'],
        // 原有其他配置保持不变
        'allowed_methods' => ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
        'allowed_headers' => ['*'],
        'allow_credentials' => false,
    ],
];

修改完成后清理Apigility缓存，重启PHP服务即可生效。

2. 临时禁用浏览器同源策略（仅本地开发调试用） #

如果暂时无法修改服务端配置，可以启动禁用同源策略的浏览器做临时开发：

• Windows系统：打开CMD窗口，执行命令：
  start chrome --disable-web-security --user-data-dir=C:\chrome_dev_temp
• Mac系统：打开终端，执行命令：
  open -n /Applications/Google\ Chrome.app --args --disable-web-security --user-data-dir=/tmp/chrome_dev_temp
  启动后在新开的浏览器窗口中访问React开发地址，即可绕过跨域校验。

3. 本地反向代理中转请求 #

你可以使用Nginx、Charles、Fiddler等工具做本地反向代理，转发请求时修改或移除Origin头绕过服务端校验，举Nginx配置示例：

server {
    listen 80;
    server_name localhost;
    location /api/ {
        proxy_pass http://localserver:8081/;
        # 移除请求中的Origin头，绕过Apigility校验
        proxy_set_header Origin "";
    }
}

配置完成后启动Nginx，前端请求地址改为fetch('/api/news')即可正常访问。

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