vue项目配置代理devServer解决跨域问题(开发环境使用)

在@vuecli3或4搭建的项目中:

在vue.config.js中配置devServer选项

devServer: {
    // host: 'localhost',
    port: 8090, //项目运行的端口号
    open: true, //配置自动启动浏览器
    proxy: {
      "/opAdmin": {
        target: "http://116.66.65.193:8081", //对应服务端的接口地址
        changeOrigin: true, // 开启跨域
        pathRewrite: {
          "^/opAdmin": "/opAdmin" //将以 /opAdmin 开头的接口重写http://116.66.65.193:8081/opAdmin ,调用时直接以 /opAdmin开头即表示调用http://116.66.65.193:8081/opAdmin
          // "^/opAdmin": "/" //将以 /opAdmin 开头的接口重写http://116.66.65.193:8081/ ,调用时直接以 /opAdmin开头即表示调用http://116.66.65.193:8081/
          // "^/opAdmin": "" //将以 /opAdmin 开头的接口重写http://116.66.65.193:8081 ,调用时直接以 /opAdmin开头即表示调用http://116.66.65.193:8081
        }
      },
      "/DoorStatus": {
        target: "http://47.99.11.102:8088", //对应服务端的接口地址
        changeOrigin: true
      }
    }
  }

如果不配置pathRewrite,则默认是使用当前值重写当前值,即:请求'/opAdmin/getList'实际请求的是'http://116.66.65.193:8081/opAdmin/getList'

如果配置pathRewrite:{"^/opAdmin": "" },则当前值可以看做是一个代替域名的东西,即:请求'/opAdmin/getList'实际请求的是'http://116.66.65.193:8081/getList'

注意:该配置只能在开发环境中使用,正式环境还是要换其他方法,比如后端设置可以跨域,nginx反向代理,前端使用jsonp处理跨域