Question

我在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中获取数据？

相对于Axios，我尝试使用vue-resource，但还是没有运气。

更新＃1

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

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

数据正在传递...

更新＃2

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

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

Answer 1

如果您要发布到Laravel，则需要在请求中指定CSRF令牌。

添加到您的<head>：

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

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

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

Answer 2

如果您发布到Laravel，则需要在请求中指定CSRF令牌。

添加到您的：

$("#expires1").click(function(){
     if (this.checked)
        alert("testing....");
});

首先，您应该在app.js中添加以下行

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

希望对您有所帮助。

Answer 3

由于我看不到您遇到什么错误，我最好的客人是这个

错误是因为您试图获取像return $request->firstName;这样的数据，但是在您显示的图像中您正在发送

{
    params : {
        firstName : 'Dally'
    }
}

尝试先获取params，然后返回您想要的内容

public function vueData(Request $request)
{
    $data = $request->input('params');
    return $data->firstName;
    //if this fails, maybe params contains a array so do
    //return $data['firstName'];
}

Answer 4

解决了该问题。真是个菜鸟错误，这很尴尬。我在控制器中缺少以下内容。

use Illuminate\Http\Request;

在Laravel API中获取HTTP Post Vue数据

4 个答案: