vue反向代理解决跨域问题

前端 同时被 2 个专栏收录
17 篇文章 0 订阅
9 篇文章 0 订阅

vue-cli3
先安装插件

npm add @cnamts/vue-cli-plugin-proxy # OR npm install @cnamts/vue-cli-plugin-proxy

在项目根目录下的vue.config.js(没有就新建)
请求地址:http:www/baidu.com/api

module.exports = {
    //反向代理,跨域
    pluginOptions: {
      //反向代理,跨域
      proxy: {
          enabled: true,
          context: '/api',   //必填,与下面的koi无关联,只是命名
          options: {
              target: 'http:www/baidu.com/',
               //secure: false,  // 如果是https接口,需要配置这个参数(但是不加这句也可以)
              changeOrigin: true, //是否跨域
              // ws:true,           //websocket
              pathRewrite:{
                // '^/koi':'',
                // '^/koi/others':'/others'
              }
          }
      }  
  }
}

全局使用,在mian.js

Vue.prototype.$axios = axios
axios.defaults.baseURL = "/api"

Vue.prototype.HOST = "/api"

需要发请求的页面

 this.$axios.get(`/...?${e}`)
      .then(res => {
        if(res.data.code===200){
 
        }
      })
      .catch(err => {
        console.log(err);
      })

let url = this.HOST+"/...";
 this.$axios.get(`/...?${e}`)
      .then(res => {
        if(res.data.code===200){
 
        }
      })
      .catch(err => {
        console.log(err);
      })

vue-cli2

proxyTable: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {
        target: 'http://localhost:1337',      //目标服务器,注意要到端口号
        changeOrigin: true,						//是否跨域
        pathRewrite: {
          '^/api': ''                                      //重写api使得 /api/login -> http://localhost:1337/login等等,这里好多csdn博主跟我的不一样,可能个人喜好问题,只要映射到相应的url就行了
        }
      }
    },

参考:
https://blog.csdn.net/qq_38738083/article/details/89922177
https://blog.csdn.net/qq_38738083/article/details/89922177

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

相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值