### 解决 Vue 中无法修改请求头 Content-Type 为 application/x-www-form-urlencoded 的方法 在 Vue 项目中，使用 Axios 发起 HTTP 请求时，默认的 `Content-Type` 是 `application/json`。如果需要将其修改为 `application/x-www-form-urlencoded`，可以通过以下方式实现： 1. **全局配置 Axios 的默认 Content-Type** 可以通过设置 Axios 的全局默认值来修改请求头中的 `Content-Type` 属性。代码如下： ```javascript import axios from 'axios'; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; // 设置全局 Content-Type [^1] ``` 2. **单次请求中单独配置 Content-Type** 如果只需要对某一次请求进行特殊处理，可以在发起请求时单独配置请求头。例如： ```javascript axios.post('/api/endpoint', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' // 单独设置 Content-Type } }) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); ``` 3. **使用 qs 库序列化数据** 当 `Content-Type` 设置为 `application/x-www-form-urlencoded` 时，请求体的数据需要以 `key=value&key=value` 的形式发送。可以使用 `qs` 库将 JavaScript 对象转换为这种格式。首先安装 `qs` 库： ```bash npm install qs ``` 然后在代码中使用： ```javascript import axios from 'axios'; import qs from 'qs'; const data = { username: 'example', password: 'password' }; axios.post('/api/endpoint', qs.stringify(data), { // 使用 qs.stringify 将对象转为 key=value 形式 [^4] headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); ``` 4. **跨域问题的处理** 如果在设置 `Content-Type` 后遇到跨域问题（如报错 `Content-Type is not allowed by Access-Control-Allow-Headers in preflight response`），需要确保服务器端允许该请求头。具体来说，服务器需要在 CORS 配置中添加 `Content-Type` 到 `Access-Control-Allow-Headers` 中[^2]。 5. **注意事项** - 如果发现即使设置了 `Content-Type`，实际请求头仍未生效，可能是因为某些插件或框架覆盖了默认配置[^3]。 - 在 Vue 项目中，建议优先使用 `qs` 库来处理 `application/x-www-form-urlencoded` 格式的请求，因为它更灵活且兼容性强[^4]。 ### 示例代码 以下是一个完整的示例代码，展示如何在 Vue 中正确设置 `Content-Type` 并发送请求： ```javascript import axios from 'axios'; import qs from 'qs'; const data = { username: 'example', password: 'password' }; axios.post('/api/endpoint', qs.stringify(data), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' // 设置请求头 [^1] } }) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); ```