Nuxt使用@nuxtjs/axios发送FormData请求Laravel无法接收数据如何解决

你在@nuxtjs/axios的自定义插件中全局强制配置了Content-Type: application/json，该配置优先级高于单次请求的header设置，覆盖了FormData请求需要的multipart/form-data头。同时你手动设置multipart/form-data时缺失浏览器自动生成的boundary分隔符，导致Laravel无法正常解析表单数据，最终拿到空数组。

@nuxtjs/axios本身完全支持FormData请求，和原生axios没有功能差异，问题完全来自配置冲突。

1. 修改axios全局配置 #

删除插件中强制设置Content-Type的代码，axios会自动根据请求参数类型设置对应请求头：发普通JS对象时自动用application/json，发FormData时自动让浏览器生成带boundary的multipart/form-data头。
修改后的插件代码如下：

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');
      // 删掉原来强制设置Content-Type的配置即可
      return axios_api;
  });
}

2. 还原请求代码 #

删除请求时手动设置Content-Type的配置项，直接传入FormData即可：

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

可选：兼容混合请求场景 #

如果部分请求确实需要默认指定JSON头，可以添加请求拦截器做判断，只给非FormData的请求设置JSON头：

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');
      // 添加请求拦截器动态设置Content-Type
      axios_api.interceptors.request.use(config => {
        if (!(config.data instanceof FormData)) {
          config.headers['Content-Type'] = 'application/json';
        }
        return config;
      })
      return axios_api;
  });
}

内容的提问来源于stack exchange，提问作者Michel Gisenæl