VUE3.x利用反向代理解决跨域

在这里插入代码片`大家都知道vue3.x相比于vue2.x更加的轻量级，也就意味着有些文件已经不会有了，
那么在vue 3.x中如何设置反向代理？
首先在根目录创建一个新的js文件(vue.config.js)

然后再其文件里面设置

 

module.exports = {
    devServer: {
      proxy: {
        '/api': {//请求称号
          target: 'http://127.0.0.1:3000', //请求的接口
          changeOrigin: true,//允许跨域
          pathRewrite: {
            '^/api': '/' 
          }
        }
      }
    }
}

设置之后，如果用的是axios的话 将/api 当做域名就可以了 比如

(async function(self){
            var res = await self.$http.get(
                "api/books/nowbooks"
            )
            self.resq = res.data
        })(this)

这个就相当于

 

(async function(self){
            var res = await self.$http.get(
                "http://127.0.0.1:3000/books/nowbooks"
            )
            self.resq = res.data
        })(this)

这样就可以了