时间戳

首页 > 解决方案 > 在 Laravel API 中获取 HTTP Post Vue 数据

javascript - 在 Laravel API 中获取 HTTP Post Vue 数据

问题描述

在我的 Laravel API 中，我很难获取从 Vue 发送的 HTTP Post 数据。

我所拥有的非常简单。

axios({
    method: 'post',
    url: 'http://localhost:8888/api/vue-data',
    data: { firstName: "Dally" },
    config: { headers: { 'Content-Type': 'multipart/form-data' }}
    })
    .then(response => {
        console.log(response.data)
    })
    .catch(e => {
        this.errors.push(e)
})

然后我的 Laravel 控制器中的功能是这样的......

public function vueData(Request $request)
{
    return $request->firstName;
}

我可以在 Chrome 开发工具中看到数据正在发送，但为什么我不能在 Laravel 中获取它？

我已经尝试过 vue-resource 而不是 Axios，但仍然没有运气。

更新#1

因此，当我使用 Axios 时，会出现以下错误。

在此处输入图像描述

当我使用 vue-resource 时，我得到了这个。

在此处输入图像描述

数据正在传递...

在此处输入图像描述

更新#2

如果我将 Laravel 控制器代码更改为此，我会在 VueJS 中得到响应。似乎 Laravel 中的控制器功能没有接收到 Vue 数据，或者我访问错误。

public function vueData(Request $request)
{
    return "Testing";
}

标签： javascriptphplaravelvue.jsaxios

解决方案

如果你 POST'ing 到 Laravel，你需要在请求中指定 CSRF 令牌。

添加到您的<head>：

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

X-CSRF-TOKEN并为 axios设置默认值：

axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

推荐阅读