Content type ‘application/x-www-form-urlencoded；charset=UTF-8‘ not supported 【vue和springboot】

在Vue和Spring Boot集成的项目中，遇到“Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported”这样的错误通常意味着Spring Boot后端没有正确配置来接受特定格式的请求数据。这个错误常见于前端（如Vue）发送的数据格式与后端（如Spring Boot）期望接收的数据格式不匹配时。下面我将解释一些常见原因和解决方案，以及Spring Boot中接收数据的默认配置。

@RequestBody注解-》需要application/json类型 

@RequestParam支持application/x-www-form-urlencoded

常见原因

1. 请求头中的Content-Type不匹配：
   • Vue前端可能通过axios或fetch发送了application/x-www-form-urlencoded格式的数据，但Spring Boot后端没有配置相应的解析器。
   • 或者，后端期望接收JSON格式的数据（application/json），但前端发送了application/x-www-form-urlencoded。
2. Spring Boot缺少必要的依赖或配置：
   • 如果后端需要解析application/x-www-form-urlencoded数据，通常需要Spring MVC的默认配置，但有时可能因为某些配置被覆盖或缺少相关依赖而导致解析失败。
3. 前端发送数据的方式不正确：
   • 使用axios时，如果未正确设置headers和data，可能会导致数据格式不正确。

常见的默认请求类型

• GET：通常用于请求数据，不发送请求体（body）。
• POST：用于提交数据，可以发送请求体。根据Content-Type的不同，请求体的格式可以是application/x-www-form-urlencoded（表单数据）、application/json（JSON数据）、multipart/form-data（文件上传）等。

在使用 Axios 发送 POST 请求时，如果你没有显式地设置 headers 中的 Content-Type，Axios 的默认行为可能会依赖于你发送的数据类型。然而，对于表单数据（form data），Axios 的行为可能会有些不同，因为它通常会处理两种常见的表单数据格式：URL-encoded 和 Multipart（用于文件上传）。

1. URL-encoded 表单数据：
   当你使用 Axios 的 axios.post 方法，并且传递一个普通的 JavaScript 对象作为 data 参数时，Axios 会自动将这个对象序列化为 URL-encoded 格式的字符串，并且设置 Content-Type 为 'application/x-www-form-urlencoded;charset=UTF-8'（如果之前没有设置的话）。这是 Axios 对表单提交的默认处理方式之一。

   axios.post('/your-endpoint', {
   key1: 'value1',
   key2: 'value2'
   });
   // 这会发送一个 Content-Type 为 'application/x-www-form-urlencoded;charset=UTF-8' 的请求

2. Multipart 表单数据：
   如果你需要发送文件或需要使用 Multipart/form-data 编码（通常用于文件上传），你应该使用 FormData 对象来构建你的数据，并且不要手动设置 Content-Type 头部。Axios 会自动识别 FormData 对象，并为其设置正确的 Content-Type，其中包含边界字符串（boundary string），这是 Multipart/form-data 编码所必需的。

   const formData = new FormData();
   formData.append('file', fileInput.files[0]);
   formData.append('key', 'value');
   
   
   axios.post('/your-upload-endpoint', formData);
   // 这会发送一个 Content-Type 为 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW'（或其他边界字符串）的请求

   注意，在发送 Multipart/form-data 请求时，如果你手动设置了 Content-Type，并且没有包含正确的边界字符串，那么服务器将无法正确解析请求体。因此，在发送 Multipart/form-data 请求时，通常不建议手动设置 Content-Type。

总结来说，对于 URL-encoded 表单数据，Axios 会自动设置正确的 Content-Type。对于 Multipart/form-data 表单数据，你应该使用 FormData 对象，并让 Axios 自动处理 Content-Type。如果你需要发送其他类型的表单数据（比如纯文本或 JSON），你可能需要手动设置 Content-Type 头部。

• PUT、DELETE等：也可以发送请求体，用法与POST类似。

Spring Boot中接受数据的方式

1. 接收application/x-www-form-urlencoded数据：
   • Spring Boot默认支持解析application/x-www-form-urlencoded数据，只要表单字段与后端Controller方法的参数名匹配即可。
   • 如果需要自定义解析，可以添加@ModelAttribute或@RequestParam注解到方法参数上。
2. 接收application/json数据：
   • 需要在Controller方法参数前添加@RequestBody注解，Spring Boot会使用Jackson库自动将JSON字符串转换为Java对象。
   • 确保Spring Boot项目中包含了Jackson的依赖。

解决方案

• 确保前端发送正确的Content-Type：
  • 如果后端期望JSON，确保前端发送请求时设置了Content-Type: application/json。
  • 使用axios时，可以通过axios.post(url, data, { headers: {'Content-Type': 'application/json'} })来设置。
• 后端配置：
  • 如果后端需要支持application/x-www-form-urlencoded，通常不需要额外配置，因为这是Spring MVC的默认行为。
  • 如果需要自定义解析，检查是否有覆盖默认配置的自定义配置。
• 检查依赖：
  • 确保Spring Boot项目中包含了处理JSON（如Jackson）和处理表单数据（如Spring Web）的必要依赖。

通过上述步骤，通常可以解决“Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported”的错误。如果问题依旧存在，可能需要更详细地检查前后端的代码和配置。