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

laawzig2  于 2023-11-20  发布在  Nginx
关注(0)|答案(1)|浏览(142)

我在尝试从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中涉及CORS头的各种解决方案,Nginx配置和Vue Axios设置,但还没有找到解决方案。任何关于在Plesk和Nginx环境中解决此CORS冲突的见解或指导都将非常感谢。
谢谢您的帮助!

guicsvcw

guicsvcw1#

你可以创建一个名为corsocket的中间件:

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
]

相关问题