Question

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

我有看法：

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

我有js：

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

路线：

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

和控制器：

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

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

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

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

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

如果我改变方法得到我有相同的错误，但如果我改变方法得到，如果我从我的控制器部分删除我从db检索数据的代码，并将字符串传递给json（例如：

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>

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

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

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

编辑：

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

{{1}}

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

希望这有帮助！

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

1 个答案: