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

Question

我尝试从 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 工作得很好。

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