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)

这样就可以了

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页

打赏

掘墓忍者

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值