### 配置 Axios 请求头以发送 FormData 格式的数据 当使用 `FormData` 发送 POST 或 PUT 请求时，确保请求头中的 `Content-Type` 设置为 `multipart/form-data` 是至关重要的。这可以通过配置 Axios 的默认设置或在每次请求中指定来实现。 对于 Vue 中的 Axios 使用场景，在创建 `FormData` 实例之后，可以将其直接传递给 Axios 方法，并适当调整请求头： ```javascript import axios from 'axios'; // 创建一个新的 FormData 对象并添加字段 const formData = new FormData(); formData.append('file', fileInput.files[0]); formData.append('username', 'example'); // 发送带有 FormData 的 POST 请求 axios({ method: 'post', url: '/api/upload', data: formData, headers: { 'Content-Type': 'multipart/form-data' } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.error(error); }); ``` 值得注意的是，如果通过 GET 请求尝试发送 `FormData` 数据，则不推荐这样做，因为 GET 请求通常用于获取资源而不是提交数据[^2]。然而，某些情况下确实可能需要这么做；此时应特别注意浏览器兼容性和安全性问题。 另外，为了简化操作流程，还可以利用 Axios 插件自动处理 Content-Type 头部信息。这样就不必每次都手动设定它了。例如，可以在项目初始化阶段全局配置 Axios 默认行为： ```javascript axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; axios.interceptors.request.use(config => { const token = localStorage.getItem('token'); if(token){ config.headers.Authorization = `Bearer ${token}`; } // 如果存在 formData 类型的数据则自动设置 content-type if (config.method === 'post' || config.method === 'put') { let contentTypeSet = false; Object.keys(config.headers).forEach(key => { if (/content-type/i.test(key.toLowerCase())) { contentTypeSet = true; } }); if (!contentTypeSet && config.data instanceof FormData) { config.headers['Content-Type'] = 'multipart/form-data'; } } return config; }, error => Promise.reject(error)); ``` 上述代码片段展示了如何拦截所有的 Axios 请求，并针对特定条件动态地应用合适的头部信息[^1]。