部署在Elastic Beanstalk的Laravel网站为何出现CORS错误？

按以下步骤排查并修复：

1. 处理前端缓存与未替换完全的硬编码URL #

• 强制刷新浏览器缓存（Ctrl+Shift+R），避免浏览器加载旧的前端静态资源。
• 检查前端所有API调用，确保所有硬编码的http://127.0.0.1:8000都替换为EB域名，包括全局配置文件（比如config.js里的API基地址）、各个组件内的请求URL。
• 重新打包React项目，将最新的静态资源部署到Elastic Beanstalk。

2. 确保Laravel配置缓存已清除 #

修改.env文件后，Laravel可能仍在使用缓存的旧配置，SSH连接到EC2实例后执行以下命令：

php artisan config:clear
php artisan cache:clear
php artisan route:clear

3. 检查Laravel的CORS配置 #

打开config/cors.php文件，确认以下配置：

• allowed_origins：添加前端访问域名（如果前端和后端域名不同），或临时设为['*']测试（生产环境建议限制具体域名）。
• allowed_methods：设为['*']或包含所需的请求方法（GET、POST、PUT等）。
• allowed_headers：设为['*']或包含自定义请求头。

同时确保CORS中间件已在app/Http/Kernel.php的api中间件组中启用：

protected $middlewareGroups = [
    'api' => [
        \Illuminate\Http\Middleware\HandleCors::class,
        // 其他中间件...
    ],
];

4. 验证实际请求与服务器配置 #

• 打开浏览器开发者工具的Network标签，查看接口请求的实际URL，确认是否仍指向localhost，定位未修改的请求。
• 检查Elastic Beanstalk的服务器配置（如Nginx/Apache），确保没有重定向到localhost的规则，确认站点配置中的server_name为EB域名。

5. 测试CORS规则 #

可以用curl命令测试CORS是否允许：

curl -X GET http://myapp.something.us-east-1.elasticbeanstalk.com/api/login \
  -H "Origin: 你的前端域名" \
  -I

查看响应头是否包含Access-Control-Allow-Origin，值为你的前端域名或*。

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