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

Posted 2023-03-04

【中文标题】在 laravel+vuejs 项目中允许 X-CSRF-TOKEN 吗？

【英文标题】：Allow X-CSRF-TOKEN in laravel+vuejs project?

【发布时间】：2019-05-06 21:08:13

【问题描述】：

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

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

【参考方案1】：

你的代码中可能有类似的东西

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

【参考方案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');

我遇到了类似的问题，在我的路由文件中添加这一行帮助我解决了这个问题。

【参考方案3】：

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

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

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

【参考方案4】：

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

let token = $('meta[name="csrf-token"]').attr('content');
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');