Laravel AJAX 请求进入路由 api Vue 错误

Posted 2023-02-22

【中文标题】Laravel AJAX 请求进入路由 api Vue 错误

【英文标题】：Laravel AJAX Request into route api Vue error

【发布时间】：2017-04-21 02:49:38

【问题描述】：

我正在尝试使用 Vue 发出 ajax 请求，以使用 auth 中间件从 API 路由获取数据，以获取最近创建的问题。我能够在不检查身份验证的情况下使其工作，但是我需要它来检查身份验证并获取创建请求的用户 ID。我目前有这个。 我的看法：

<script type="text/javascript">
$.ajaxSetup(
    headers: 
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    
);
</script>
<script src="/public/js/adminApp.js"></script>
<template id="messages-template">
  <div>
    <ul class="menu" v-for="messages in list">
      <li><!-- start message -->
        <a href="#">
          <div class="pull-left" style="margin-left: 9px;margin-right: 9px;">
            <i class="fa fa-pencil"></i>
          </div>
          <h4>@ messages && messages.name 
            <small><i class="fa fa-clock-o"></i> 5 mins</small>
          </h4>
        </a>
      </li>
    </div>
  </div>
</template>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript" src="/public/js/messages.js">
</script>

我的 api.php 路由：

<?php

use Illuminate\Http\Request;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/
Route::group(['middleware' => ['auth:api']], function () 
  Route::get('/test', function (Request $request) 
    return App\issue::latest()->get();
  );
);

我的messages.js vue 脚本：

Vue.component('messages', 
  template: '#messages-template',
  data: function ()
  return 
    list:[]
  ;,
  created ()
    $.getJSON('/api/test', function(messages)
      this.list = messages;
    .bind(this))
  
);

new Vue(
  el: '#messagesArea'
);

我目前收到的错误消息是 401，并且路由正在回馈："error":"Unauthenticated."

【问题讨论】：

您为该路由所属的组指定了auth:api 中间件。它可能期望请求带有某种令牌。您没有提供，因此无法进行身份验证。

我认为应该从元获取令牌的 $.ajaxSetup 会起作用，因为这是我在@ZacBrown 的其他地方读到的

哦，是的。对不起。没听懂。我认为@asemahle 下面的答案正是您想要的。

【参考方案1】：

你写过：

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

这会查找名称为csrf-token 的<meta> 元素，并解析出content。因此，要使其正常工作，您需要将 meta 标记添加到文档头部。试试这个：

<meta id="token" name="csrf-token" content=" csrf_token() ">

【讨论】：

我刚刚添加了这一点，但我仍然收到 401 未经授权的错误@asemahle

您能否验证$('meta[name="csrf-token"]').attr('content') 是否正常工作？尝试在控制台中运行它。它应该打印 csrf 令牌的值。

嗯...这似乎工作。如果正在设置 csrf-token，那么我不确定问题出在哪里。您可以在开发人员工具中查看请求。在 chrome 中，在网络选项卡下，找到对 /api/test 的调用，并验证它是否在标头中有 X-CSRF-TOKEN，或者将 XSRF-TOKEN 作为请求 cookie。

我看到的都是this 看起来COOKIE中有令牌

@RPSystems 尝试深入 auth 中间件并添加打印语句，其中 laravel 正在验证 csrf 标头以查看服务器是否获取它们。