Vue3 Vite项目中Axios Post请求浏览器显示为Get的问题咨询

在Vue3 + Vite项目中，使用Axios的post方法发起请求，浏览器Network面板显示请求方法为GET，但服务器端（Express）已配置POST路由且能正常响应该请求。同时项目通过vite.config.js配置了代理解决CORS问题，不确定是否和此现象有关。

已提供相关截图：

• Axios请求代码截图
• Express POST路由配置截图
• 浏览器Network请求截图
• 封装的Axios请求函数截图

• 检查封装的Axios函数是否存在方法覆盖
  查看封装的请求函数，确认是否在处理时把POST方法意外转为了GET。比如是否有逻辑判断错误或默认参数设置错误，示例错误代码：

  // 错误示例：未正确读取传入的method，强制设为GET
  function request(options) {
    return axios({
      method: 'GET',
      url: options.url,
      data: options.data
    })
  }
  

• 检查代理配置是否触发重定向或方法转换
  查看vite.config.js中的代理配置，确认是否存在修改请求方法的逻辑，或者是否因代理配置导致请求触发30x重定向（浏览器会自动将重定向的POST转为GET）。示例代理配置检查点：

  // vite.config.js 代理配置检查
  export default defineConfig({
    server: {
      proxy: {
        '/api': {
          target: 'http://localhost:3000',
          changeOrigin: true,
          // 排查是否有rewrite规则或其他可能影响请求方法的配置
        }
      }
    }
  })
  

• 检查服务器端是否存在重定向
  查看Network面板中请求的状态码，如果是301/302，说明请求被服务器重定向。此时需要检查服务器路由配置，比如是否因URL路径拼写问题（如末尾多了/）导致自动重定向。

• 检查Axios拦截器是否修改请求方法
  确认是否为Axios实例添加了请求拦截器，且拦截器中意外修改了请求方法：

  // 错误示例：拦截器中强制修改请求方法
  axios.interceptors.request.use(config => {
    config.method = 'GET'
    return config
  })
  

• 用原生请求测试定位问题
  在浏览器控制台用fetch直接发起POST请求，验证Network显示是否正常：

  fetch('/api/your-target-path', {
    method: 'POST',
    body: JSON.stringify({}),
    headers: { 'Content-Type': 'application/json' }
  })
  

  如果此时Network显示POST，说明问题出在Axios封装或配置上；如果仍显示GET，大概率是代理或服务器端的重定向问题。

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