Laravel 后端和使用 Nginx 托管在 Plesk 上的 Vue 前端之间的 CORS 问题

Question

我在尝试从 Vue 前端到 Laravel 后端以及随后的 Flutter 移动应用程序对用户进行身份验证时遇到 CORS（跨源资源共享）问题。后端 API 通过 Postman 无缝运行，Flutter 应用程序运行时不会出现任何 CORS 问题。但是，当尝试从 Vue 前端登录时，遇到以下错误：

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.

以前，当使用 Apache 托管在 cPanel 上时，此设置可以正常运行，但在使用 Nginx 迁移到 Plesk 后，我遇到了这些 CORS 冲突。

以下是设置摘要：

• Laravel 后端 API
• 管理面板的 Vue 前端
• Flutter 移动应用
• cPanel 和 Apache 之前的成功功能
• Plesk 和 Nginx 的当前问题

迄今为止采取的步骤：

• 验证后端 API 与 Postman 配合使用
• 检查了 Flutter 应用程序的功能，没有 CORS 问题
• 探索 Laravel 和 Vue 中潜在的 CORS 配置

我已经查看了 Laravel、Nginx 配置和 Vue Axios 设置中涉及 CORS 标头的各种解决方案，但尚未找到解决方案。任何有关解决 Plesk 和 Nginx 环境中的 CORS 冲突的见解或指导将不胜感激。

谢谢您的帮助！

Answer 1

您可以创建名为 corsHandler 的中间件：

    class corsHandler
{
    /**
     * Handle an incoming request.
     *
     * @param \Illuminate\Http\Request $request
     * @param \Closure(\Illuminate\Http\Request): (\Illuminate\Http\Response|\Illuminate\Http\RedirectResponse) $next
     * @return \Illuminate\Http\Response|\Illuminate\Http\RedirectResponse
     */
    public function handle(Request $request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', '*');

    }
}

在你的 kernel.php 中：

protected $middleware = [
...,
\App\Http\Middleware\corsHandler::class
]

和：

protected $routeMiddleware = [
...,
'cors' => \App\Http\Middleware\corsHandler::class
]