在 Laravel 中使用 Vue.js 和 Vue 资源调用 AJAX

Posted 2023-02-22

【中文标题】在 Laravel 中使用 Vue.js 和 Vue 资源调用 AJAX

【英文标题】：Call AJAX with Vue.js and Vue resource in Laravel

【发布时间】：2017-05-15 04:54:59

【问题描述】：

我在 Laravel 中使用 Vue.js 和 Vue 资源发出 AJAX 请求。

我有意见：

Form::open(['method' => 'post', 'class' => 'form-inline', 'id' => 'main-form'])
Form::text('param1', null, ['id' => 'param1', 'class' => 'form-control'])
Form::text('param2', null, ['id' => 'param2', 'class' => 'form-control'])
<input @click="sendIt($event)" type="submit" value="Check prices" class="btn btn-success btn-theme" />
Form::close()

我有js：

var Vue = require('vue');
var VueResource = require('vue-resource');
Vue.use(VueResource);
Vue.http.headers.common['X-CSRF-TOKEN'] = $('meta[name=_token]').attr('content');
const app = new Vue(
el: '#app',
methods: 
sendIt: function (e)
    
        e.preventDefault();
        var token = $('[name="_token"]').val();
        this.$http.post('/data').then((response) => 
            console.log(response);
        , (response) => 
            console.log(response);
        );
    

路线：

Route::post('/data', 'MainController@data');

和控制器：

public function data() 

    $msg = $this->test(); //method that retrieves data from db
    return response()->json(['msg'=> $msg], 200);

它给了我发布 500 内部服务器错误

作为回应，我有这个标题：

Cache-Control
Content-Type
Date
phpdebugbar-Id
Server
Status
Transfer-Encoding
X-Powered-By

在我的数据站点的网络中，我有没有令牌的响应标头，带有令牌的请求标头，并且我在请求有效负载中有令牌。

如果我改变方法来获取我有同样的错误但是如果我改变方法来获取并且如果我从我的控制器中删除我从数据库中检索数据并将字符串传递给 json 的代码部分（例如：

$msg = 'test';
return response()->json(['msg'=> $msg], 200);

我成功了，我可以在页面上输出测试。

所以我不确定是令牌还是其他问题。 我试过了：

var token = $('[name="_token"]').val();
this.$http.post('/prices', _token:token)

但什么都没有。再次出现同样的错误。

如果我添加这个：

http: 
    headers: 
  X-CSRF-TOKEN: document.querySelector('#token').getAttribute('content')
    
,

页面加载时出现语法错误。

如果我改成这样：

http: 
    headers: 
  Authorization: document.querySelector('#token').getAttribute('content')
    

我再次遇到内部服务器错误。

这是我在主视图中的标记：

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

<script>
    window.Laravel = <?php echo json_encode([
        'csrfToken' => csrf_token(),
    ]); ?>
</script>

编辑：

如果我在 x-csrf-token 周围添加引号但仍然出现令牌不匹配错误，则此部分有效。

http: 
    headers: 
        'X-CSRF-TOKEN': document.querySelector('#token').getAttribute('content')
    
,

【问题讨论】：

您检查过您的日志文件吗？ (storage/logs/laravel.log)。我想那里已经有相当数量了，所以你最好删除文件，然后再次尝试你的请求，然后你应该有更多关于你的错误的信息。或者，如果您转到控制台中的预览选项卡，那么错误也应该在那里。

我清除了日志文件，但没有任何新的事情发生。但在预览中，我在 VerifyCsrfToken.php 第 68 行得到了 TokenMismatchException：所以它是关于令牌的。但是我发了：|

你知道你使用的是什么版本的 Vue Resource 吗？

Vue版本是2.1.6，资源是1.0.3

【参考方案1】：

我可能弄错了，但在顶部的示例中，您有：

Vue.http.headers.common['X-CSRF-TOKEN'] = $('meta[name=_token]').attr('content');

但是，在您的主视图文件中，您有：

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

您应该能够简单地将$('meta[name=_token]') 更改为$('meta[name=csrf-token]')（因此它们匹配）。

此外，X-CSRF-TOKEN: ... 出现语法错误的原因是您不能在键名中使用连字符，除非您将它们括在引号中，即 'X-CSRF-TOKEN': ...。

希望这会有所帮助！

【讨论】：

我更改了它，但又出现了同样的错误。发送相同的标头并显示相同的令牌不匹配错误。但是现在如果我在引号中设置带有 x-csrf 的 http 标头，我不会在页面加载时出错。

@KondukterCRO window.Laravel.csrfToken 和请求头中的token一样吗？

是的，它们是一样的