Laravel项目CORS跨域问题排查及服务器配置咨询

问题背景 #

在Laravel项目中遇到CORS跨域问题，已完成以下配置操作但问题仍未解决：

• 在middlewares目录创建Cors.php中间件
• 在Kernel.php和app/Providers/RouteServiceProvider.php中声明该中间件
• 在config目录添加Cors.php配置文件

项目部署在Hostinger VPS上，系统为Ubuntu 22.04.5 LTS，现咨询是否需要在服务器的Nginx或Apache配置中添加相关设置。

控制台报错信息 #

Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
post.js:42559 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
scrollspy.js:224 Uncaught TypeError: Cannot read properties of null (reading 'classList')
    at An._activate (scrollspy.js:224:10)
    at An._process (scrollspy.js:191:14)
    at new An (scrollspy.js:80:10)
    at bg_scripts.js:35:9
sb-forms-latest.js:5 Uncaught Error: GET_ELEMENTS:  -> form[data-sb-form-api-token]
    at e (sb-forms-latest.js:5:415)
    at sb-forms-latest.js:5:3777
profile.js:32882 Error: Network Error
    at createError (profile.js:872:15)
    at XMLHttpRequest.handleError (profile.js:754:14)
127.0.0.1:8000/getMessages:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
boxicons.min.css:1          Failed to load resource: the server responded with a status of 404 ()

现有配置代码 #

Middlewares/Cors.php #

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')

    }
}

config/cors.php #

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths'  =>  ['api/*','web/*', 'sanctum/*'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => ['*'],

    'allowed_headers' => ['*'],

    'exposed_headers' => ['*'],

    'max_age' => 0,

    'supports_credentials' => true

];

Http/Kernel.php 新增配置 #

protected $routeMiddleware = [
    'auth' => \App\Http\Middleware\Authenticate::class,
    'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
    'auth.session' => \Illuminate\Session\Middleware\AuthenticateSession::class,
    'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
    'can' => \Illuminate\Auth\Middleware\Authorize::class,
    'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
    'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class,
    'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
    'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
    'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
    'cors'     => \App\Http\Middleware\Cors::class, // added
];

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