Vue CLI项目中Fetch POST请求被Dev Server转为GET的问题排查

嘿，我来帮你拆解一下这个问题——你看到的两次301跳转、请求方法从POST变GET，核心是HTTP重定向的浏览器行为加上URL路径的小问题，一步步触发了后续的错误。

为什么会出现这种情况？ #

• URL末尾斜杠的坑：你调用的登录接口URL可能是http://dev.server/api/login，但服务器实际配置的路由是带末尾斜杠的http://dev.server/api/login/。很多服务器（比如Nginx、Apache）会自动给无斜杠的路径返回301重定向，跳转到带斜杠的版本。
• HTTP规范的历史遗留行为：早期HTTP规范里，当POST请求收到301永久重定向时，浏览器会自动把后续请求改成GET。虽然现在有些浏览器做了调整，但Chrome在这种场景下还是会触发这个逻辑，这就导致你的POST登录请求经过跳转后变成了GET，而你的API只支持POST，自然就返回405错误了。
• 跨域预检的干扰：因为你的Vue项目跑在本地（比如localhost:8080），和DEV服务器属于跨域，浏览器会先发OPTIONS预检请求确认是否允许跨域POST。但前面的301跳转打乱了这个流程，最终又触发了一次GET请求，就出现了你看到的那串请求序列。

具体怎么修复？ #

给你几个实操方案，一步步来：

1. 先把请求URL的末尾斜杠改对 #

先检查你fetch里的URL，确保和服务器的路由完全匹配：

// 错误写法：末尾没斜杠，容易触发301
fetch('http://dev.server/api/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(loginData)
})

// 正确写法：和服务器路由一致，带上末尾斜杠
fetch('http://dev.server/api/login/', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(loginData)
})

不确定的话，直接在浏览器地址栏敲这个URL，看会不会自动跳转，就能确认正确路径了。

2. 调整服务器的重定向配置 #

如果服务器不需要强制带斜杠，可以改一下服务器配置，关掉自动补斜杠的301跳转。比如Nginx里可以这么改：

server {
  location /api/login {
    # 禁止自动跳转到带斜杠的路径
    try_files $uri /api/login;
    # 你的API其他配置...
  }
}

3. 确保服务器CORS配置正确 #

跨域场景下，服务器必须明确允许POST方法，并且正确处理OPTIONS预检请求：

• 响应头要包含Access-Control-Allow-Methods: POST, OPTIONS
• OPTIONS请求要直接返回200，别给它也返回301

4. 调试验证 #

修改后在Chrome网络面板里：

• 勾选「Preserve log」，避免跳转后日志被清掉
• 查看每个请求的响应头，确认没有301跳转了
• 检查最终到API的请求方法是不是POST

这样一步步来，应该就能解决问题啦。

内容的提问来源于stack exchange，提问作者Michael Warner