实例详解vue中的代理proxy

目录 问题 复习一下跨域的解决方案 原理 场景 扩展几个常用的devServer配置 扩展几个vue/cli3的配置

问题

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

复习一下跨域的解决 方案

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

原理

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

场景

1、假设你要调取的接口是 http://e.dxy.net/api/ test ，然后你可以在本地调 localhost:8080/api/test ，如 axios.get(& # 39;/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': {
          t arg et: '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 ，你就可以用 pat hr ewr IT e ，遇到 /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. export s = {
  // .. .
  devServer: {
    disableHostCheck: true
  }
};

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

module.e xp orts = {
  //...
  devServer: {
    publicPath: '/assets/'
  }
};

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

扩展几个vue/cli3的配置

完整版本

到此这篇关于详解vue中的代理proxy的 文章 就介绍到这了,更多相关vue代理proxy内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章: vue跨域proxy代理配置详解 Vue3设置Proxy代理解决跨域问题 vue服务器代理proxyTable配置如何解决跨域 Vue使用Proxy代理后仍无法生效的解决 解决VueCil代理本地proxytable无效报错404的问题

总结

以上是 为你收集整理的 实例详解vue中的代理proxy 全部内容，希望文章能够帮你解决 实例详解vue中的代理proxy 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于实例详解vue中的代理proxy的详细内容...