Vue.js使用axios向Express发送POST请求无响应但Postman请求正常如何解决

根因分析 #

Postman请求正常、浏览器端axios请求无响应且后端无日志的核心原因是浏览器同源策略触发的CORS预检请求被拦截：

• Postman属于桌面客户端工具，不遵循同源策略，可直接发送POST请求到后端
• 浏览器在发送跨域POST请求前，会先发送OPTIONS类型的预检请求确认后端是否允许跨域访问，你的Express服务未处理该预检请求，请求直接被拦截，根本不会进入你定义的/registerPOST路由，因此不会打印"posted"日志

修复步骤 #

1. 解决CORS跨域问题（二选一即可） #

方案一：使用官方cors包（推荐）

• 在Express项目根目录执行安装命令：
  npm install cors
• 在Express入口文件所有路由之前引入并启用cors：

const cors = require('cors')
// 全局允许跨域，开发环境可直接用，生产环境建议配置origin参数限制允许的域名
app.use(cors())

方案二：手动编写CORS中间件

在Express入口文件所有路由之前添加如下代码：

app.use((req, res, next) => {
  // 允许的请求源，开发环境可设为*，生产环境替换为前端实际部署域名
  res.header('Access-Control-Allow-Origin', '*')
  // 允许的请求头类型
  res.header('Access-Control-Allow-Headers', 'Content-Type')
  // 允许的请求方法
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
  // 预检请求直接返回200状态码
  if(req.method === 'OPTIONS') {
    return res.sendStatus(200)
  }
  next()
})

2. 补充JSON请求体解析配置 #

Express 4.16+版本已内置JSON解析中间件，无需额外安装body-parser，在路由前添加如下代码即可解析axios发送的JSON格式请求体：

app.use(express.json())

3. 前端代码补充错误捕获 #

给axios请求添加catch逻辑，方便后续排查其他异常：

post(){ //from vue to express
  this.information = {email:this.email, username:this.username, password:this.password}
    axios.post("http://localhost:8081/register", this.information)
    .then(response => this.msg= response.data.messeage)
    .catch(err => console.log('请求异常：', err))
}

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