首次请求报415 Unsupported Media Type错误，后续请求正常排查

核心原因定位 #

出现415错误的直接原因是首次提交时前端发送的请求Content-Type为application/x-www-form-urlencoded，但后端接口只支持application/json格式；而第二次提交时请求的Content-Type被修正为application/json，所以能正常响应。Postman测试正常是因为手动指定了正确的Content-Type。

具体排查与修复步骤 #

1. 强制前端请求设置正确的Content-Type #

检查前端提交请求的代码，确保无论首次还是后续提交，都明确指定Content-Type: application/json：

• 若使用fetch：

  fetch('/game', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(selectedLocation)
  })
  

• 若使用jQuery：

  $.ajax({
    url: '/game',
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(selectedLocation),
    success: function(res) {
      window.location.href = '/result';
    }
  })
  

关键是必须显式设置请求头，不能依赖默认值。

2. 排查前端初始化时序问题 #

首次提交异常、第二次正常，大概率是请求配置的初始化逻辑在首次触发后才完成：

• 确保请求相关的代码在页面DOM加载完成后就执行，比如：

  document.addEventListener('DOMContentLoaded', function() {
    // 绑定提交按钮的点击事件、初始化请求配置
    const submitBtn = document.getElementById('submit-btn');
    submitBtn.addEventListener('click', function() {
      // 这里写提交请求的逻辑
    });
  });
  

避免把请求初始化逻辑放在第一次点击后才执行的代码块里。

3. 后端接口兼容性调整（可选） #

如果需要兼容表单格式提交，可以修改Controller方法，同时支持两种媒体类型：

@PostMapping(value = "/game", consumes = {MediaType.APPLICATION_JSON_VALUE, MediaType.APPLICATION_FORM_URLENCODED_VALUE})
public ResponseEntity<?> handleSubmit(
    @RequestBody(required = false) LocationDto location,
    @RequestParam(required = false) Double lat,
    @RequestParam(required = false) Double lng
) {
    // 处理逻辑：JSON格式用location参数，表单格式用lat和lng参数
    return ResponseEntity.ok().build();
}

不过更推荐统一用JSON格式，减少前后端格式不一致的问题。

4. 对比正常版HTML的差异 #

既然更换另一版HTML后功能正常，逐行对比两个文件的差异，重点关注：

• 提交按钮的事件绑定方式
• AJAX请求的配置细节
• 页面初始化逻辑的执行时机
• 是否有全局JS变量或第三方库影响请求发送

验证方法 #

修复后首次启动应用，按以下步骤验证：

1. 打开浏览器开发者工具（F12），切换到Network标签
2. 点击提交按钮，查看请求的Content-Type是否为application/json
3. 确认请求状态码为200，并且页面正常跳转到/result

内容的提问来源于stack exchange，提问作者Николай Божков