Laravel8后端API与React前端跨域CORS问题求助

针对你遇到的前端https://front.shops-ci.com访问Laravel后端https://backend.vente.ci时的CORS错误，直接从Laravel后端配置入手解决：

1. 配置CORS允许的源 #

打开项目根目录下的config/cors.php文件，修改allowed_origins字段，将你的前端域名加入允许列表：

'allowed_origins' => ['https://front.shops-ci.com'],

如果需要临时允许所有域名（生产环境不推荐），可以设置为['*']。

同时确保allowed_methods和allowed_headers配置满足你的请求需求，比如：

'allowed_methods' => ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
'allowed_headers' => ['*'],

2. 启用CORS中间件 #

打开app/Http/Kernel.php，将Laravel自带的CORS处理中间件加入api中间件组：

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

3. 清除配置缓存 #

运行以下命令确保配置生效：

php artisan config:cache
php artisan route:cache

备选方案：Nginx层面配置CORS #

如果Laravel配置不生效，也可以在后端服务器的Nginx配置中添加CORS响应头：

server {
    # 其他已有配置...

    location /api {
        add_header Access-Control-Allow-Origin https://front.shops-ci.com;
        add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
        add_header Access-Control-Allow-Headers "Content-Type, Authorization";

        if ($request_method = OPTIONS) {
            return 204;
        }

        # 转发请求到Laravel的配置...
        try_files $uri $uri/ /index.php?$query_string;
    }
}

修改后重启Nginx服务即可。

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