预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 X-CSRF-TOKEN答案

【问题标题】：Request header field X-CSRF-TOKEN is not allowed by Access-Control-Allow-Headers in preflight response预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 X-CSRF-TOKEN
【发布时间】：2019-01-20 01:04:05
【问题描述】：

我有一个laravel项目，当我运行php artisan serve时，浏览器显示错误：

Failed to load http://127.0.0.1:8000/api/news/get-news-list: Request header field X-CSRF-TOKEN is not allowed by Access-Control-Allow-Headers in preflight response.

我的代码如下：

axios.get(domainName+'/api/news/get-news-list').then(response=>{
    news = response.data.list;
}).catch(function (error) {
    console.log(error);
});

我已经添加了如下中间件：

内核.php

protected $middleware = [
    \App\Http\Middleware\Cors::class
];

protected $routeMiddleware = [
    'cors' => \App\Http\Middleware\Cors::class
];

Cors.php

public function handle($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','Content-Type,Authorization');

}

api.php

Route::prefix('news')->group(function () {
    Route::get('get-news-list', 'API\NewsController@getList')->middleware('cors');
});

谁能告诉我如何解决这个问题？

【问题讨论】：

标签： laravel cors

【解决方案1】：

只需将x-csrf-token 标头添加到允许列表即可。在您的情况下，它位于Cors.php 文件中，标题为Access-Control-Allow-Headers。

Access-Control-Allow-Headers 控制 CORS 请求中允许的标头。

【讨论】：

我在 Access-Control-Allow-Headers 中添加了 'Content-Type,Authorization, X-Requested-With,X-CSRF-Token'，然后就可以了，谢谢！
我遇到了添加它的问题，你们能帮我吗？