Netlify部署Vue CLI应用时JSON Server无法运行该如何解决？

问题原因 #

1. 你配置的Vue开发服务代理仅会拦截发往本地前端服务（默认是http://localhost:8080）的相对路径请求，你在Axios请求中直接写死了后端完整地址http://localhost:3000/user，请求没有走代理直接发送，自然会触发跨域错误。
2. 简写的代理配置缺少必要参数，部分场景下会出现转发异常。
3. 修改vue.config.js后如果没有重启本地开发服务，配置不会生效。

可行解决方案 #

1. 修改Axios请求地址
   将请求代码中的完整地址替换为相对路径：

// 替换前
let result = await axios.post("http://localhost:3000/user", {
  name: this.name,
  email: this.email,
  password: this.password,
})
// 替换后
let result = await axios.post("/user", {
  name: this.name,
  email: this.email,
  password: this.password,
})

2. 完善代理配置
   将vue.config.js的代理配置改为完整版，避免默认配置的兼容问题：

module.exports = {
  devServer: {
    proxy: {
      '/': {
        target: 'http://localhost:3000',
        changeOrigin: true, // 修改请求头的host为目标地址，避免后端host校验失败
      }
    }
  }
}

3. 重启开发服务
   修改完配置后必须重启Vue本地开发服务，新的代理配置才会生效。

注意：上述代理方案仅适用于本地开发环境，项目打包上线后，需要让后端配置CORS响应头，或者用Nginx等服务做接口转发才能解决跨域问题。

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