无法在 Laravel/Vue.Js 中执行 Ajax 请求

Posted 2023-03-14

技术标签:

【中文标题】无法在 Laravel/Vue.Js 中执行 Ajax 请求【英文标题】：Unable to do Ajax request in Laravel/Vue.Js 【发布时间】：2019-03-27 12:13:03 【问题描述】：

所以我已经到了让我开始为这个问题撞墙的地步，我尝试在谷歌上搜索解决方案，但所有页面都简单地说“包含 CSRF 令牌”，我已经包含了.

路由使用默认的“web”中间件。

CSRF Token included

我在这里束手无策，因此非常感谢任何指导。

使用最新的 Laravel 5.7，所有组件都是最新的

JS 脚本：

<script>
export default 
    name: "BankIdLogin",
    data() 
        return 
            status: '',
            error: '',
            message: '',
        
    ,

    created() 

    ,

    methods: 
        initiateBankID: function (e) 
            e.preventDefault();
            e.stopPropagation();
            axios
                .post(
                    "/login/bankIdAuthentication", 
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        ssn: $('#ssn').val()
                    
                )
                .then(res => res.json())
                .then(res => console.log(res));
        ,
        collectBankID() 

        
    

</script>

电话回复：


   "message":"",
   "exception":"Symfony\\Component\\HttpKernel\\Exception\\HttpException",
   "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Foundation/Exceptions/Handler.php",
   "line":204,
   "trace":[
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Foundation/Exceptions/Handler.php",
     "line":176,
     "function":"prepareException",
     "class":"Illuminate\\Foundation\\Exceptions\\Handler",
     "type":"->"
  ,
  
     "file":"/var/www/html/app/Exceptions/Handler.php",
     "line":51,
     "function":"render",
     "class":"Illuminate\\Foundation\\Exceptions\\Handler",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
     "line":83,
     "function":"render",
     "class":"App\\Exceptions\\Handler",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
     "line":55,
     "function":"handleException",
     "class":"Illuminate\\Routing\\Pipeline",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/View/Middleware/ShareErrorsFromSession.php",
     "line":49,
     "function":"Illuminate\\Routing\\closure",
     "class":"Illuminate\\Routing\\Pipeline",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php",
     "line":151,
     "function":"handle",
     "class":"Illuminate\\View\\Middleware\\ShareErrorsFromSession",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
     "line":53,
     "function":"Illuminate\\Pipeline\\closure",
     "class":"Illuminate\\Pipeline\\Pipeline",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Session/Middleware/StartSession.php",
     "line":63,
     "function":"Illuminate\\Routing\\closure",
     "class":"Illuminate\\Routing\\Pipeline",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php",
     "line":151,
     "function":"handle",
     "class":"Illuminate\\Session\\Middleware\\StartSession",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
     "line":53,
     "function":"Illuminate\\Pipeline\\closure",
     "class":"Illuminate\\Pipeline\\Pipeline",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Cookie/Middleware/AddQueuedCookiesToResponse.php",
     "line":37,
     "function":"Illuminate\\Routing\\closure",
     "class":"Illuminate\\Routing\\Pipeline",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php",
     "line":151,
     "function":"handle",
     "class":"Illuminate\\Cookie\\Middleware\\AddQueuedCookiesToResponse",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
     "line":53,
     "function":"Illuminate\\Pipeline\\closure",
     "class":"Illuminate\\Pipeline\\Pipeline",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Cookie/Middleware/EncryptCookies.php",
     "line":66,
     "function":"Illuminate\\Routing\\closure",
     "class":"Illuminate\\Routing\\Pipeline",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php",
     "line":151,
     "function":"handle",
     "class":"Illuminate\\Cookie\\Middleware\\EncryptCookies",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
     "line":53,
     "function":"Illuminate\\Pipeline\\closure",
     "class":"Illuminate\\Pipeline\\Pipeline",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php",
     "line":104,
     "function":"Illuminate\\Routing\\closure",
     "class":"Illuminate\\Routing\\Pipeline",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Routing/Router.php",
     "line":681,
     "function":"then",
     "class":"Illuminate\\Pipeline\\Pipeline",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Routing/Router.php",
     "line":656,
     "function":"runRouteWithinStack",
     "class":"Illuminate\\Routing\\Router",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Routing/Router.php",
     "line":622,
     "function":"runRoute",
     "class":"Illuminate\\Routing\\Router",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Routing/Router.php",
     "line":611,
     "function":"dispatchToRoute",
     "class":"Illuminate\\Routing\\Router",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php",
     "line":176,
     "function":"dispatch",
     "class":"Illuminate\\Routing\\Router",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
     "line":30,
     "function":"Illuminate\\Foundation\\Http\\closure",
     "class":"Illuminate\\Foundation\\Http\\Kernel",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/barryvdh/laravel-debugbar/src/Middleware/InjectDebugbar.php",
     "line":65,
     "function":"Illuminate\\Routing\\closure",
     "class":"Illuminate\\Routing\\Pipeline",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php",
     "line":151,
     "function":"handle",
     "class":"Barryvdh\\Debugbar\\Middleware\\InjectDebugbar",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
     "line":53,
     "function":"Illuminate\\Pipeline\\closure",
     "class":"Illuminate\\Pipeline\\Pipeline",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/fideloper/proxy/src/TrustProxies.php",
     "line":57,
     "function":"Illuminate\\Routing\\closure",
     "class":"Illuminate\\Routing\\Pipeline",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php",
     "line":151,
     "function":"handle",
     "class":"Fideloper\\Proxy\\TrustProxies",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
     "line":53,
     "function":"Illuminate\\Pipeline\\closure",
     "class":"Illuminate\\Pipeline\\Pipeline",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/TransformsRequest.php",
     "line":31,
     "function":"Illuminate\\Routing\\closure",
     "class":"Illuminate\\Routing\\Pipeline",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php",
     "line":151,
     "function":"handle",
     "class":"Illuminate\\Foundation\\Http\\Middleware\\TransformsRequest",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
     "line":53,
     "function":"Illuminate\\Pipeline\\closure",
     "class":"Illuminate\\Pipeline\\Pipeline",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/TransformsRequest.php",
     "line":31,
     "function":"Illuminate\\Routing\\closure",
     "class":"Illuminate\\Routing\\Pipeline",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php",
     "line":151,
     "function":"handle",
     "class":"Illuminate\\Foundation\\Http\\Middleware\\TransformsRequest",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
     "line":53,
     "function":"Illuminate\\Pipeline\\closure",
     "class":"Illuminate\\Pipeline\\Pipeline",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/ValidatePostSize.php",
     "line":27,
     "function":"Illuminate\\Routing\\closure",
     "class":"Illuminate\\Routing\\Pipeline",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php",
     "line":151,
     "function":"handle",
     "class":"Illuminate\\Foundation\\Http\\Middleware\\ValidatePostSize",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
     "line":53,
     "function":"Illuminate\\Pipeline\\closure",
     "class":"Illuminate\\Pipeline\\Pipeline",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/CheckForMaintenanceMode.php",
     "line":62,
     "function":"Illuminate\\Routing\\closure",
     "class":"Illuminate\\Routing\\Pipeline",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php",
     "line":151,
     "function":"handle",
     "class":"Illuminate\\Foundation\\Http\\Middleware\\CheckForMaintenanceMode",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
     "line":53,
     "function":"Illuminate\\Pipeline\\closure",
     "class":"Illuminate\\Pipeline\\Pipeline",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php",
     "line":104,
     "function":"Illuminate\\Routing\\closure",
     "class":"Illuminate\\Routing\\Pipeline",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php",
     "line":151,
     "function":"then",
     "class":"Illuminate\\Pipeline\\Pipeline",
     "type":"->"
  ,
  
     "file":"/var/www/html/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php",
     "line":116,
     "function":"sendRequestThroughRouter",
     "class":"Illuminate\\Foundation\\Http\\Kernel",
     "type":"->"
  ,
  
     "file":"/var/www/html/public/index.php",
     "line":54,
     "function":"handle",
     "class":"Illuminate\\Foundation\\Http\\Kernel",
     "type":"->"
  
   ]

web.php

Route::post('/login/bankIdAuthentication', 'Api\LoginController@bankidAuthentication');

银行IDController.php：

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\Models\BankidSignature;
use App\Models\User;
use Frozzare\Personnummer\Personnummer;
use ILabs\Api\BankId;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class LoginController extends BaseController

public function bankidAuthentication(Request $request)

    $ssn = Personnummer::format($request->post('ssn'), TRUE) ?? $request->post('ssn');
    if ($ssn === '')
        $ssn = $request->post('ssn');

    if ($ssn !== '') 
        $user = User::where(
            [
                'ssn'    => $ssn,
                'active' => 1,
            ]
        );
        if (!$user->count()) 
            return \GuzzleHttp\json_encode(['status' => 0, 'message' => __('INVALID_SSN')]);
        

        $bankid = new BankId();

        try 
            $bankid->bankIDAuthenticationRequest($ssn);

            session(['ssn' => $ssn]);

         catch (\Exception $e) 
            return \GuzzleHttp\json_encode(['status' => 0, 'message' => $e->getMessage()]);
        
    
    return \GuzzleHttp\json_encode(['status' => 0, 'message' => 'Unknown Error']);

编辑在 web 中间件中禁用 CSRF 可以使路由正常工作，所以它毕竟与 CSRF 相关......

函数提供的 _token 似乎与会话中的 _token 不匹配（不知道它们是否应该匹配，或者它们是否以其他方式相互关联）示例：

_token from request: wiqBYqBdtMJL9JxInySSSBGtYzPGHAjePLNBILRz
_token in session: e5caPLy6N82QEQoUzixHAvojE2SortRKqxOFM3sI

Request headers

编辑 2 经过更多研究后，我开始意识到我的问题是 Ajax 调用似乎开始了他们自己的新会话。就像这里描述的 Laracast - _token doesnt match session _token

但是，我无法使其与他们在该线程中提供的任何“修复”一起工作。

编辑 3

我不知道发生了什么，我提交了我的更改，现在它正在工作..

【问题讨论】：

你的 Laravel 路线是什么？ @IjasAmeenudeen 添加了问题的路径我在异常堆栈中的任何地方都看不到缺少 CSRF，您能在这里显示控制器方法或您正在使用的任何自定义中间件吗？这只是一个猜测，因为这是我在尝试谷歌搜索异常时得到的唯一结果您是否尝试将接受和内容类型标头设置为您的 axios 请求？另请粘贴您正在调用的控制器方法 【参考方案1】：

在您调用此 ajax 的 Html 页面中添加此

var bankIdAuthenticationRoute = "route('bankIdAuthenticationRoute')"
var csrf = "csrf_token()"

然后在你的 JS 文件中使用这两个变量来进行 Ajax 调用。

【讨论】：

路由和 CSRF 都没有错，我尝试了完整的 URL 并且 csrf 包含在请求中

以上是关于无法在 Laravel/Vue.Js 中执行 Ajax 请求的主要内容，如果未能解决你的问题，请参考以下文章

Laravel 6 + Vue.js 无法挂载组件：未定义模板或渲染函数

如何填充输入选择框Laravel vue js

Laravel + Vue JS：从数据库中获取/存储 Eloquent 模型的值

Laravel 和 Vue.js 看不到 css 和 js 文件

不允许 axios 发布 405 | Laravel + vue.js

LARAVEL + Vue.js：使用刀片在 MPA 中显示整个页面的 vue.js 组件，对 SEO 不友好