Laravel API cors - 预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段授权

Laravel API cors - request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response

提问by Peter Darmis

I'm having a CORS issue between my Laravel api and Angular client application.

我的 Laravel api 和 Angular 客户端应用程序之间存在 CORS 问题。

This is my cors middleware

这是我的 cors 中间件

public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', 'http://localhost:4200')
            ->header('Access-Control-Allow-Credentials', 'true')
            ->header('Access-Control-Allow-Methods', 'GET,HEAD,OPTIONS,POST,PUT"')
            ->header('Access-Control-Allow-Headers', 'Origin, Content-Type');        }
}

I'm getting the following error

我收到以下错误

Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/advertisement/31/upload-image' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

从源“ http://localhost:4200”访问“ http://127.0.0.1:8000/api/advertisement/31/upload-image”的XMLHttpRequest已被 CORS 策略阻止：请求标头字段授权不被允许通过预检响应中的 Access-Control-Allow-Headers。

The Network response gives me a 200 response code. So I'll post the headers I get.

网络响应给了我 200 响应代码。所以我会发布我得到的标题。

Angular is on localhost:4200 Laravel is on 127.0.0.1:8000

Angular 在 localhost:4200 上 Laravel 在 127.0.0.1:8000

bootstrap/app.php

引导程序/app.php

<?php

/*
|--------------------------------------------------------------------------
| Create The Application
|--------------------------------------------------------------------------
|
| The first thing we will do is create a new Laravel application instance
| which serves as the "glue" for all the components of Laravel, and is
| the IoC container for the system binding all of the various parts.
|
*/

$app = new Illuminate\Foundation\Application(
    $_ENV['APP_BASE_PATH'] ?? dirname(__DIR__)
);

/*
|--------------------------------------------------------------------------
| Bind Important Interfaces
|--------------------------------------------------------------------------
|
| Next, we need to bind some important interfaces into the container so
| we will be able to resolve them when needed. The kernels serve the
| incoming requests to this application from both the web and CLI.
|
*/

$app->singleton(
    Illuminate\Contracts\Http\Kernel::class,
    App\Http\Kernel::class
);

$app->singleton(
    Illuminate\Contracts\Console\Kernel::class,
    App\Console\Kernel::class
);

$app->singleton(
    Illuminate\Contracts\Debug\ExceptionHandler::class,
    App\Exceptions\Handler::class
);

// $app->middleware([
//     Vluzrmos\LumenCors\CorsMiddleware
// ]);

/*
|--------------------------------------------------------------------------
| Return The Application
|--------------------------------------------------------------------------
|
| This script returns the application instance. The instance is given to
| the calling script so we can separate the building of the instances
| from the actual running of the application and sending responses.
|
*/

return $app;

回答by Juan Lozoya

You are missing add 'Authorization' to your 'Access-Control-Allow-Headers'

您缺少将“授权”添加到您的“访问控制允许标头”

->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Authorization');

If your problem persist you might implement vluzrmos/lumen-cors

如果您的问题仍然存在，您可以实施vluzrmos/lumen-cors

回答by Jonathan K

Try make the following correction

尝试进行以下更正

public function handle($request, Closure $next)
{
    return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, DELETE, OPTIONS')
        ->header('Access-Control-Allow-Headers', 'Origin, Content-Type, X-Auth-Token, Authorization');        
}

Remember to change the Asterisk(*) to your production URL, when migrating to production (for security reasons)

请记住在迁移到生产时将星号（*）更改为您的生产 URL（出于安全原因）

回答by Peter Darmis

You should add X-Requested-Within Access-Control-Allow-Headers.

您应该添加X-Requested-With在Access-Control-Allow-Headers。

public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', 'http://localhost:4200')
            ->header('Access-Control-Allow-Credentials', 'true')
            ->header('Access-Control-Allow-Methods', 'GET, HEAD, OPTIONS, POST, PUT')
            ->header('Access-Control-Max-Age', '3600')
            ->header('Access-Control-Allow-Headers', 'Origin, Accept, Content-Type, X-Requested-With');        }
}