Question

我用vuejs创建了一个laravel项目。我想从另一台服务器获取data.js文件，但不要获取它。当我运行项目时，控制台中会发生以下错误

在飞行前响应中，Access-Control-Allow-Headers不允许请求标头字段X-CSRF-TOKEN。

我试图解决它，但没有解决。这是我的代码：

cors.php

 public function handle($request, Closure $next)
{   
    //return $next($request);
    header("Access-Control-Allow-Origin: *");

    // ALLOW OPTIONS METHOD
    $headers = [
        'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE',
        'Access-Control-Allow-Headers'=> 'Content-Type, X-CSRF-TOKEN, X-Auth-Token, Origin'
    ];
    if($request->getMethod() == "OPTIONS") {
        // The client-side application can set only headers allowed in Access-Control-Allow-Headers
        return Response::make('OK', 200, $headers);
    }

    $response = $next($request);
    foreach($headers as $key => $value)
        $response->header($key, $value);
    return $response;
}

bootstrap.js

let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
  window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
  console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x- 
  csrf-token');
}

我也在meta标签中得到了X-CSRF-Token。如何允许这个x-CSRF令牌？如果有人需要更多信息，请告诉我。任何帮助将不胜感激。谢谢！

Answer 1

您的代码中可能已经有类似的东西

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

Answer 2

您可以尝试在路线中添加它吗？

header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token,authorization');

我正面临类似的问题，因此在我的路线文件中添加此行有助于解决该问题。

Answer 3

其他服务器在CORS请求中不接受X-CSRF-TOKEN。

除了不发送请求中的令牌外，您无能为力。实际上，将CSRF令牌发送到远程服务器可能会危及用户的安全。当然，除非其他服务器是您控制的服务器。

只需从bootstrap.js中删除在axios中设置标头的行，以允许axios进行CORS请求，但请记住始终发送令牌。

Answer 4

将manifest.yml替换为document.head.querySelector('meta[name="csrf-token"]');

$('meta[name="csrf-token"]').attr('content');

允许在laravel + vuejs项目中使用X-CSRF-TOKEN吗？

4 个答案: