Laravel 无法获取 Nuxt 中 axios FormData 发送的数据

Posted 2023-02-22

【中文标题】Laravel 无法获取 Nuxt 中 axios FormData 发送的数据

【英文标题】：Laravel can't get data sent from axios FormData in Nuxt

【发布时间】：2021-11-05 10:39:37

【问题描述】：

我尝试从 Nuxt 向 Laravel 发送 api 请求。 在我的 nuxt 上，我的 axios 配置如下：

export default function($axios, store, inject)
  var base_url = "http://api-test.test/api";
  inject('api', function()
      const axios_api = $axios.create()
      axios_api.setBaseURL(base_url);
      axios_api.setHeader('Accept', 'application/json', 'common');
      axios_api.setHeader('Content-type', 'application/json', 'common');
      return axios_api;
  );

我的发帖请求是：

var formData = new FormData();
formData.append('name','name');
formData.append('lastname','lastname');
this.$api().post('/image', formData).then(response => 
     console.log(response.data)
)

在我的 laravel 控制器上，我有：

return response()->json([
    'data' => $request->all()
]);

这是我的路线：

Route::post('/image', [ImageController::class, 'index']);

这个响应返回一个空数组，但是当我使用对象时

var data =  name: 'name', lastname: 'lastname' 

响应返回我的数据；如果我的 formData 没有按请求发送

我的 console.log 来自使用 formData 我的 console.log 来自使用简单对象 我尝试在调用 axios 时将 multipart/form-data 放在标头上

const config = 
    headers:'Content-Type' : 'multipart/form-data'
;
this.$api().post('/image', formData, config).then(response => 
     console.log(response.data)
)

完全没有效果。

我使用 FormData 因为我想上传文件。

我使用 laragon（如果有什么不同的话）

--------我注意到了------ ---

我安装了axios（我之前用过@nuxtjs/axios），我测试了它，我可以将formdata发送到laravel，我现在可以处理我的文件了；我不知道@nuxtjs/axios 是不是不能发送formdata 但是标准的axios 工作得很好。

【问题讨论】：

你能复制你的 Laravel 路由以及你做了哪些测试（回答“你怎么知道它不起作用”这个问题的东西）？我有一些想法，但直到我看到这一切我才能真正说出。

@toyi 我编辑了帖子

【参考方案1】：

对于表单数据，首先检查 cors 是否没有阻止请求，并确保您在表单数据中包含一个 csrf 令牌，或者可能在该特定路由上禁用 csrf 检查。

把它写成这样：

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

在js中获取csrf：

const csrf = document.querySelector('meta[name="csrf-token"]')['content'];

然后将其附加到您的表单中：

axios_api.setHeader('X-CSRF-TOKEN', csrf);

【讨论】：

我的前端项目和laravel不同，在Nuxt上，所以我无法检索laravel的csrf-token，但我会用@nuxtjs/axios这样的csrf