vue 调用接口 Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported 如何解决

这问题通常是由于后端接口不支持 Content-Type 为 application/x-www-form-urlencoded 导致的。解决方法可以尝试以下几种：

1. 修改请求方式为 POST，并将请求数据格式改为 FormData 格式，这样就可以避免使用 application/x-www-form-urlencoded。

2. 修改请求方式为 GET，并将请求数据转换成 URL 参数的形式，这样也可以避免使用 application/x-www-form-urlencoded。

3. 如果无法修改请求方式，可以尝试联系后端开发人员，让他们支持 Content-Type 为 application/x-www-form-urlencoded。

4. 如果以上方法都无法解决问题，可以尝试使用其他的请求库或框架进行请求，比如 axios、fetch 等。这些库默认使用 Content-Type 为 application/json，可以避免这个问题。

相关问题

Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supporte

引用中提到了一个错误信息：“Content type ‘application/x-www-form-urlencoded；charset=UTF-8‘ not supported”，这个错误通常出现在使用axios发起请求时，参数格式为x-www-form-urlencoded时。而引用中解释了这个错误的原因，即@RequestBody需要的参数格式是JSON类型，而x-www-form-urlencoded是以键值对拼接的形式。解决这个问题的方法有两种：

1. 后端解决：可以在后端对参数进行处理，将x-www-form-urlencoded格式的参数转换为JSON格式。这样@RequestBody就能正常接收参数了。

2. 前端解决：在封装axios时，可以修改参数类型为application/json;charset=UTF-8，即使用JSON格式的参数。可以通过修改axios的默认请求头来实现，例如：instance.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'。

因此，你可以根据具体的情况选择其中一种解决方法来解决这个问题。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* [Content type ‘application/x-www-form-urlencoded；charset=UTF-8‘ not supported](https://blog.csdn.net/weixin_40873693/article/details/127036277)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item]
- *2* *3* [SpringBoot +Vue前后端分离项目报错：Content type ‘application/x-www-form-urlencoded；charset=UTF-8...](https://blog.csdn.net/qq_47188967/article/details/129685908)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item]
[ .reference_list ]

使用application/x-www-form-urlencoded;charset=UTF-8 方式 vue 进行传参

在Vue中使用application/x-www-form-urlencoded;charset=UTF-8方式进行传参，可以使用axios库来发送POST请求，并设置请求头的Content-Type为application/x-www-form-urlencoded。

首先，需要安装axios库。可以通过以下命令来安装：

npm install axios

接下来，在需要发送POST请求的组件中引入axios库，并设置请求头的Content-Type为application/x-www-form-urlencoded。可以使用qs库来将参数对象序列化为URL编码的字符串。

import axios from 'axios';
import qs from 'qs';

// ...

// 定义参数对象
const params = {
  key1: 'value1',
  key2: 'value2',
};

// 将参数对象序列化为URL编码的字符串
const formData = qs.stringify(params);

// 发送POST请求
axios.post('/api/post', formData, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  }
})
  .then(response => {
    // 处理响应数据
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

// ...

注意，上述代码中的`/api/post`是示例的后端接口地址，需要根据实际情况进行替换。