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

Posted

技术标签:

【中文标题】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 [duplicate] 【发布时间】:2019-08-24 03:02:08 【问题描述】:

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

这是我的 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');        

我收到以下错误

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

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

Angular 位于 localhost:4200 Laravel 在 127.0.0.1:8000

bootstrap/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;

【问题讨论】:

【参考方案1】:

您缺少在“Access-Control-Allow-Headers”中添加“授权”

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

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

【讨论】:

我现在收到以下错误尽管我的来源是本地主机而不是 >访问 XMLHttpRequest at 'localhost:4200/advert/create'(重定向自 '127.0.0.1:8000/api/advertisement/32/upload-image')从来源'null'被 CORS 策略阻止:对预检请求的响应未通过访问控制检查:当请求的凭据模式时,响应中的“Access-Control-Allow-Origin”标头的值不能是通配符“”是“包括”。 XMLHttpRequest 发起的请求的凭证模式由 withCredentials 属性控制。 ok 设置你的 ->header('Access-Control-Allow-Origin', '*') 我必须在之前更改它,因为我收到此错误>响应中的“Access-Control-Allow-Origin”标头的值不能是通配符“*”模式是“包含” 在这种情况下,这可能是一个更好的选择github.com/vluzrmos/lumen-cors 我已经尝试了 cors 的 spatie 包,但我仍然收到错误这实际上是一个笑话。【参考方案2】:

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

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');        

【讨论】:

【参考方案3】:

尝试进行以下更正

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');        

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

【讨论】:

以上是关于Laravel API cors-预检响应中的Access-Control-Allow-Headers不允许请求标头字段授权[重复]的主要内容,如果未能解决你的问题,请参考以下文章

Laravel 5 CORS - XMLHttpRequest 无法加载 http://myapi.com。预检响应具有无效的 HTTP 状态代码 500

Laravel 7 CORS:被 CORS 策略阻止:对预检请求的响应未通过访问控制检查:没有“Access-Control-Allow-Origin”

Axios CORS/Preflight 因 Laravel 5.4 API 调用而失败

如何解决 Laravel + Nuxt.js 中的 CORS 错误

在 Flask 中允许 CORS

Laravel 5.4 + jQuery CORS 请求