Vue.js跨域POST请求异常：代理配置后为何未转发至目标API？

从你的描述来看，核心存在两个问题：请求没转发到预期的http://example.com/api/user/login，且原本的POST请求变成了GET请求并返回500错误。我们一步步拆解原因并给出解决方向：

1. 路径重写导致目标地址不符合预期 #

你的proxyTable配置里设置了pathRewrite: { '^/api': '' }，这意味着当你请求/api/user/login/时，proxy会把路径中的/api直接去掉，最终转发到的地址是http://example.com/user/login/，而非你预想的http://example.com/api/user/login。

如果你的后端API实际路径就是/api/user/login，那需要调整pathRewrite规则：

{ 
  '/api': { 
    target: 'http://example.com', 
    changeOrigin: true, 
    pathRewrite: { '^/api': '/api' } // 或者直接删除pathRewrite字段，默认不会修改路径
  } 
}

如果后端API路径确实是/user/login/，那这部分配置没问题，但需要确认后端是否接受该路径的POST请求。

2. POST请求变成GET请求的核心原因 #

浏览器显示的是GET请求，大概率是发生了301/302重定向——后端服务器把你的POST请求重定向成了GET请求，而重定向后的地址没有经过proxy转发，所以才会指向localhost:8080。

常见的重定向触发场景：

• 路径末尾斜杠不匹配：比如你请求的是/api/user/login/（带斜杠），但后端实际接口路径是/api/user/login（不带斜杠），服务器会返回301重定向到不带斜杠的地址，而HTTP规范中重定向默认会把POST转换成GET。
• 后端路由/权限逻辑问题：比如后端对该接口的路由配置错误，或者权限校验时触发了重定向逻辑（比如未登录重定向到登录页，但你本身就是在请求登录接口）。

另外也需要检查Vue-resource的全局配置：
如果你设置了Vue.http.options.emulateHTTP = true，Vue-resource会把POST请求转换成GET请求，并添加X-HTTP-Method-Override: POST头，如果后端不支持这个自定义头，就会导致请求异常。可以尝试关闭该选项：

Vue.http.options.emulateHTTP = false;

快速排查步骤 #

1. 直接测试后端API：用Postman或curl直接发送POST请求到http://example.com/user/login/（对应你的proxy转发地址），看是否正常响应，有没有重定向。
2. 查看Network面板细节：在浏览器开发者工具的Network标签里，找到该请求，先确认初始请求方法是不是POST，再看Response Headers里有没有Location字段（重定向地址），定位重定向的来源。
3. 验证proxy基础功能：先发送一个GET请求到/api/user/login/，看是否能正确转发到目标服务器，排除proxy配置的基础问题。

内容的提问来源于stack exchange，提问作者Yang Yun