vue3.0配置代理proxy 解决vue项目中跨域问题 - 前端笔记-1.在根目录创建vue.config.js 2.在里面写入vue.config.js module.exports={ //服务...

学习笔记

点滴记忆
回忆过往
首页>> web前端 >>vue3.0配置代理proxy 解决vue项目中跨域问题 - 前端笔记

1.在根目录创建 vue.config.js
2.在里面写入vue.config.js
module.exports = {
  // 服务项配置
  devServer: {
    proxy: {
      "/home": {
        target"http://127.0.0.1:3000",
        changeOrigintrue//表示是否跨域,
        pathRewrite: {
          //表示需要rewrite重写的
          "^/home""/home"
        }
      }
    }
  }
};


3.发送请求
<script>
import axios from "axios";
export default {
  created() {
    console.log(axios.get("/home/banner"));
  }
};
</script>

4.后台的接口地址 :127.0.0.1:3000/home/banner

思路:
    1.在vue.config.js中添加proxy进行反向代理实现    前端跨域
    2.在vue.config.js中  写了 3个 /home   尽量保持统一     也可不重写路劲    也可以 / 发送请求     下面想咋改咋改
module.exports = {
  // 服务项 proxy 跨域配置
  devServer: {
    proxy: {
      // 下面的 / 代表所有接口都可以发送
      "/": {
        target"http://127.0.0.1:3000"// 跨域目标地址
        changeOrigintrue//表示是否跨域,
        pathRewrite: {
          //表示需要rewrite重写的
          "^/home""/home"
        }
      }
    }
  }
};


    3.通过axios发送请求的  不用在写 默认地址了      proxy 已经配置了跨域地址











×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:前端笔记 » vue3.0配置代理proxy 解决vue项目中跨域问题

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)