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

Question

我正在使用 Vue.js 和 Vue 资源在 Laravel 中发出 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');

和 Controller :

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

它给我 post 500 内部服务器错误

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

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

在我的数据站点的网络中，我有没有 token 的响应 header ，带有 token 的请求 header ，并且我在请求负载中有 token 。

如果我更改方法以获取我有相同的错误但是如果我更改方法以获取并且如果我从我的 Controller 中删除我从数据库检索数据并将字符串传递给json的代码部分(例如:

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

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

所以我不确定是token有问题还是别的什么。我试过了，这个:

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

我又遇到了内部服务器错误。

这是我在主视图中的 token :

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

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

编辑:

如果我在 x-csrf-token 周围添加引号但我仍然遇到 token 不匹配错误，这部分工作。

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

Answer 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':...。

希望这对您有所帮助!