vue:详解vue中的代理proxy

问题

我们本地调试一般都是 npm run serve,然后打开 本机ip:8080localhost:8080)对吧,这时候我们要调接口调试,后端的接口的地址可能在测试环境,也可能是自己电脑的 ip,总之不是你的 lcoalhost:8080,那么你调接口就会产生跨域,那么怎么办呢?就需要proxy出场了

复习一下跨域的解决方案

  1. jsonp
  2. cors
  3. Node中间件代理(两次跨域)
  4. nginx反向代理
  • CORS支持所有类型的HTTP请求,是跨域HTTP请求的根本解决方案
  • JSONP只支持GET请求,JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。
  • 不管是Node中间件代理还是nginx反向代理,主要是通过同源策略对服务器不加限制。

日常工作中,生产环境用得比较多的跨域方案是cors和nginx反向代理。
本地项目中调试用的最多的就是 node 代理,当然像 nginx、charles(抓包工具)做代理也可以,只要你会配置。

原理

vue 中的 proxy 就是利用了 Node 代理,原理还是因为服务器端没有跨域这一说嘛,也是用了这么一个插件 地址

场景

1、假设你要调取的接口是 http://e.dxy.net/api/test,然后你可以在本地调 localhost:8080/api/test,如axios.get('/api/test')
配置代理后,会做如下转发:
localhost:8080/api/test -> http://e.dxy.net/api/test
localhost:8080/bcma/api/test -> http://e.dxy.net/bcma/api/test

//vue-cli3.0 里面的 vue.config.js做配置
devServer: {
  proxy: {
      '/api': {
          target: 'http://e.dxy.net',  // 后台接口域名
          ws: true,        //如果要代理 websockets,配置这个参数
          secure: false,  // 如果是https接口,需要配置这个参数
          changeOrigin: true,  //是否跨域
      }
  }
}

有新手朋友可能会问:这样做是不是只是本地调试这样做,线上怎么办呢?
我们一般调接口 axios.get('/api/test'),这样调是自动请求的当前域名,也就是本地就调用 localhost:8080,到了线上就是你们自己的服务域名,所以这个只是为了本地调试使用。当然,如果你要同时调用很多个不同的域名服务,那你调用的时候就要把相关的域名明确写出来,如axios.get('http://e.dxy.net/api/test')

2、当你调接口后端的命名没有统一给接口前加 /api 这类的标识,那么你可以自己加,也就是你可以在本地调 localhost:8080/api/test,如axios.get('/api/test'),而你要的目标接口是 http://e.dxy.net/test,你就可以用 pathRewrite,遇到 /api 就去找代理 http://e.dxy.net 并且把 /api 重写为 /
所以转发效果就是:
localhost:8080/api/test -> http://e.dxy.net/test

//vue-cli3.0 里面的 vue.config.js做配置
devServer: {
  proxy: {
      '/api': {
          target: 'http://e.dxy.net',  // 后台接口域名
          ws: true,        //如果要代理 websockets,配置这个参数
          secure: false,  // 如果是https接口,需要配置这个参数
          changeOrigin: true,  //是否跨域
          pathRewrite:{
              '^/api': '/'
          }
      }
  }
}

3、这个是对所有的接口都代理的,不止是检测到 /api 的接口,比如:
localhost:8080/api/test -> http://e.dxy.net/api/test
localhost:8080/test -> http://e.dxy.net/test

devServer: {
 proxy: 'http://e.dxy.net'
}

扩展几个常用的devServer配置

完整版
1、 devServer.disableHostCheck
当设置为true时,此选项将绕过主机检查。不建议这样做,因为不检查主机的应用程序容易受到DNS重新绑定攻击。

module.exports = {
  //...
  devServer: {
    disableHostCheck: true
  }
};

2、devServer.publicPath
假设服务器在http://localhost:8080下运行,output.filename设置为bundle.js。默认情况下,devServer.publicPath是/,所以您的包可以作为http://localhost:8080/bundle.js 使用。将devServer.publicPath更改为 /assets/ 就变为 http://localhost:8080/assets/bundle.js

module.exports = {
  //...
  devServer: {
    publicPath: '/assets/'
  }
};

确保devServer.publicPath始终以正斜杠开头和结尾。

扩展几个vue/cli3的配置

完整版本

  • 49
    点赞
  • 200
    收藏
  • 打赏
    打赏
  • 35
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:博客之星2021 设计师:Hiro_C 返回首页
评论 35

打赏作者

Lvan的前端笔记

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

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

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

打赏作者

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

抵扣说明:

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

余额充值