Docker容器间前端请求遭CORS拦截问题求助

核心原因 #

浏览器报错提示Access-Control-Allow-Origin头包含多个*值，说明Laravel后端和Nginx同时返回了CORS跨域头，导致重复；而REST客户端不受浏览器同源策略限制，因此可以正常访问API。

解决方案 #

方案1：仅通过Laravel配置CORS（推荐） #

1. 编辑Laravel项目的config/cors.php文件，配置允许的源、方法等：

   return [
       'paths' => ['api/*', 'sanctum/csrf-cookie'],
       'allowed_methods' => ['*'],
       'allowed_origins' => ['http://localhost:8080'], // 开发环境指定前端地址，生产环境替换为实际域名
       'allowed_origins_patterns' => [],
       'allowed_headers' => ['*'],
       'exposed_headers' => [],
       'max_age' => 3600,
       'supports_credentials' => false,
   ];
   

2. 确认app/Http/Kernel.php的全局中间件数组中包含CORS中间件（默认已添加，若被注释则取消注释）：

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

3. 确保Nginx配置中没有添加任何CORS相关响应头（当前你提供的Nginx配置已满足此要求）。

方案2：仅通过Nginx配置CORS #

若不想使用Laravel的CORS中间件，可通过Nginx直接配置跨域：

1. 注释掉app/Http/Kernel.php中的\Illuminate\Http\Middleware\HandleCors::class中间件。
2. 在Nginx的server块中添加以下配置：

   server {
       listen 80;
       index index.php index.html;
       error_log  /var/log/nginx/error.log;
       access_log /var/log/nginx/access.log;
       root /var/www/public;
   
       # 处理OPTIONS预检请求
       if ($request_method = OPTIONS) {
           add_header Access-Control-Allow-Origin "http://localhost:8080" always;
           add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
           add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
           add_header Access-Control-Max-Age 3600;
           add_header Content-Length 0;
           add_header Content-Type text/plain;
           return 200;
       }
   
       # 为普通请求添加CORS头
       add_header Access-Control-Allow-Origin "http://localhost:8080" always;
       add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
       add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
   
       location ~ \.php$ {
           try_files $uri =404;
           fastcgi_split_path_info ^(.+\.php)(/.+)$;
           fastcgi_pass app:9000;
           fastcgi_index index.php;
           include fastcgi_params;
           fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
           fastcgi_param PATH_INFO $fastcgi_path_info;
       }
       location / {
           try_files $uri $uri/ /index.php?$query_string;
           gzip_static on;
       }
   }
   

3. 重启Nginx容器使配置生效：

   docker restart dmc-nginx
   

为什么REST客户端可以访问？ #

浏览器的同源策略仅限制前端JavaScript发起的跨域请求，而REST客户端（如Postman、Insomnia）不属于浏览器环境，不受CORS政策约束，因此可以正常请求后端API。

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