客户端Axios POST请求失败问题排查与解决

问题描述 #

客户端通过Axios向服务器发起POST请求时失败，但直接在浏览器访问服务器URL能正常返回欢迎信息。服务器已补充CORS配置允许POST和GET方法，但问题仍未解决。

客户端代码 #

axios.post(`https://cric360-api.vercel.app/`)
  .then(res => {
      console.log(res.data)
  })
  .catch(err => {
      console.log(err)
  })

服务器端配置 #

• 初始路由配置（仅处理GET请求）：

app.get("/", (req, res) => { res.json("Welcome to Cric360-api") })

• 补充的CORS配置：

app.use(cors(
  {
    origin: ["https://cric360.vercel.app"],
    methods: ["POST", "GET"],
    credentials: true
  }
))

解决方案 #

问题根源在于客户端使用了POST请求，但服务器端仅实现了/路径的GET请求处理逻辑。即使CORS允许POST方法，服务器没有对应的路由来处理POST请求，因此会返回错误。

将客户端的请求方法改为GET即可解决问题：

axios.get(`https://cric360-api.vercel.app/`)
  .then(res => {
      console.log(res.data)
  })
  .catch(err => {
      console.log(err)
  })

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