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

时间:2018-10-23 09:44:12

标签: javascript ajax laravel vue.js csrf

因此,我已经开始着手解决这个问题,我已经尝试使用Google搜索来寻找解决方案,但是所有页面都只说了“包括CSRF令牌”

该路由使用默认的“网络”中间件。

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

BankIDController.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

我不知道发生了什么,我做了一些更改,现在可以正常工作了。

1 个答案:

答案 0 :(得分:0)

在您的HTML页面中调用此Ajax的位置添加此

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

然后将JS文件中的两个变量都用于该Ajax调用。