浏览器使用JavaScript fetch向Tomcat发送POST请求报错如何解决？

DevOps 小满

2026-10-10

问题根因

核心错误是fetch请求的URL未携带HTTP协议头，浏览器将localhost识别为URL协议而非域名，直接抛出scheme不支持的异常，和Postman自动补全协议的逻辑不同。
若前端页面部署端口和后端8080端口不一致，补全协议后还会触发浏览器同源策略的CORS跨域校验，Postman默认跳过跨域校验所以请求正常。

解决方案

第一步：修正前端fetch请求URL

给请求地址补全http://协议头，修改后代码如下：

let candy = {
  id: id, // 传入预先声明的id变量
  flavor: 0
};
fetch('http://localhost:8080/api/candy', {
  method: "POST",
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  body: JSON.stringify(candy)
})
.then(response => response.json())
.then((response) => {
  console.log(response.message);
});

第二步：（可选）后端配置CORS跨域规则

如果修正URL后仍报跨域错误，在Spring Boot项目中添加如下任意一种CORS配置即可：

局部接口配置：给对应Controller类或接口方法添加@CrossOrigin注解

@RestController
@RequestMapping("/api")
// 允许所有来源访问该类下的接口，生产环境可替换为实际前端域名如"http://localhost:5173"
@CrossOrigin(origins = "*") 
public class CandyController {
    @PostMapping("/candy")
    public Candy addCandy(@RequestBody Candy candy) {
        // 业务逻辑
    }
}

全局跨域配置：新增CORS配置类

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*") // 生产环境建议配置为具体前端域名
                .allowedMethods("*")
                .allowedHeaders("*")
                .maxAge(3600);
    }
}