vue反向代理（跨域）

vue-cli 的反向代理设置

情况1

1.在根目录下创建vue.config.js文件

在该文件下，写入如下代码（每次修改配置文件之后要重启）

module.exports = {
  publicPath: './',
  devServer: {
    port: 8080,
    open: true,
    // 反向代理配置
    proxy: {
      '/api': {
        target: 'http://xxxxx.com/',// 代理的目标服务器地址
        changeOrigin: true,//是否改变源（必填）
        pathRewrite: { "^/api": "" }// 重写路径运行后就代理到对应的地址
      }
    }
  }
}

效果

http请求本来是axios.get('http://xxxxx.com/banner')
现在就可以写成axios.get('/api/banner') 实现跨域
这种情况必须要有pathRewrite: { "^/api": "" }

情况2

1.在根目录下创建vue.config.js文件

在该文件下，写入如下代码（每次修改配置文件之后要重启）

module.exports = {
  publicPath: './',
  devServer: {
    port: 8080,
    open: true,
    // 反向代理配置
    proxy: {
      '/api': {
        target: 'http://xxxxx.com/',// 代理的目标服务器地址
        changeOrigin: true,//是否改变源（必填）
      }
    }
  }
}

效果

http请求本来是axios.get('http://xxxxx.com/api/banner')
现在就可以写成axios.get('/api/banner') 实现跨域