使用proxy代理请求地址,可以帮助隐藏http请求地址,并可解决跨域请求的问题

proxy配置

根目录vue.config.js

module.exports = {
  devServer: {
    host: '0.0.0.0', // 默认是localhost
    port: 8081, // 前端项目编译后使用的端口号,跟webpack配置的port同理
    proxy: {
      '/api': {
        target: "api-url",   // 实际跨域请求的API地址
        secure: false,   // https请求则使用true
        ws: true,
        changeOrigin: true,  // 跨域
        // 请求地址重写  http://front-end/api/login ⇒ http://api-url/login
        pathRewrite: {
          '^/api': '/',
        }
      }
    }
  }
}

使用proxy代理

this.$http.post('/api/login', json)
      .then((res) => {
        console.log(res);
      })

在这里会将此处的’/api/login’代理替换为’http://api-url/login’

虽然在浏览器控制台的Network中看到的请求是
在这里插入图片描述
但实际上后端api已经接收到请求了,如果你报错了,先排除是代理未生效的原因(我就耗费了大量的时间怀疑这个)

Logo

前往低代码交流专区

更多推荐