Plesk+Nginx环境下Laravel与Vue前端的CORS问题求助

Access to XMLHttpRequest at 'https://backend-api-url/login' from origin 'https://vue-frontend-url' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

架构背景 #

• Laravel后端API
• Vue管理面板前端
• Flutter移动端应用
• 原cPanel+Apache环境运行正常，迁移到Plesk+Nginx后出现问题

已排查动作 #

• Postman调用后端API正常
• Flutter端无CORS问题
• 检查过Laravel及Vue的CORS配置

1. 优先配置Plesk中的Nginx跨域规则 #

Plesk会自动生成Nginx配置，直接修改服务器文件可能被覆盖，必须在面板内操作：

1. 登录Plesk，找到后端API对应的域名，进入「域名 > 主机设置」
2. 滚动到「附加Nginx指令」，添加以下配置：

# 直接响应OPTIONS预检请求，无需转发到PHP
if ($request_method = OPTIONS) {
    add_header Access-Control-Allow-Origin "https://vue-frontend-url";
    add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
    add_header Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With";
    add_header Access-Control-Max-Age "86400";
    add_header Content-Length 0;
    add_header Content-Type text/plain;
    return 200;
}

# 给常规请求添加CORS头（always确保错误响应也带头）
add_header Access-Control-Allow-Origin "https://vue-frontend-url" always;
add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
add_header Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With" always;

• 若需允许多个前端域名，替换Access-Control-Allow-Origin为$http_origin，并添加域名限制规则：

  if ($http_origin ~* ^(https://vue-frontend-url|https://other-admin-domain.com)$) {
      set $cors_origin $http_origin;
  }
  add_header Access-Control-Allow-Origin $cors_origin always;
  

2. 确认Laravel的CORS中间件生效 #

确保Laravel自带的CORS中间件（fruitcake/cors）配置正确：

1. 打开config/cors.php，检查核心配置：

'paths' => ['api/*', 'login', 'logout'], // 包含登录等非api前缀的路径
'allowed_origins' => ['https://vue-frontend-url'],
'allowed_methods' => ['*'], // 或明确列出GET/POST/PUT/DELETE/OPTIONS
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => false,

2. 检查app/Http/Kernel.php，确认api中间件组包含CORS处理：

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

3. 排查Nginx与PHP-FPM的转发冲突 #

Plesk默认Nginx会把动态请求转发给PHP-FPM，但OPTIONS预检请求不需要PHP处理：

• 确保Nginx配置中的OPTIONS响应规则在转发PHP的规则之前（Plesk面板添加的附加指令会自动放在正确位置）
• 禁用Apache的.htaccess中的CORS规则（当前环境用Nginx，Apache仅处理静态资源，规则无效）

4. 验证测试方法 #

1. 打开浏览器开发者工具「网络」标签，查看OPTIONS请求的响应头，确认Access-Control-Allow-Origin存在
2. 用curl直接测试预检请求：

curl -X OPTIONS -H "Origin: https://vue-frontend-url" -H "Access-Control-Request-Method: POST" -H "Access-Control-Request-Headers: Content-Type" https://backend-api-url/login -v

查看响应头是否包含正确的CORS字段。

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