怎么在Vue项目中设置代理

　　介绍

怎么在Vue项目中设置代理?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

<强>使用需求

假设我们本地开发目前以下几种状态:

<李>

本地开发,数据使用本地的模拟服务器

<李>

涉及权限接口使用本地模拟数据,其他全部使用指定的一台远程机器

<李>

涉及权限接口使用本地模拟数据,其他数据分接口使用不同的远程机器

<李>

所有接口使用同一台远程机器

<强>方案

先看下经典的proxyTable写法:

proxyTable:, { 　　,& # 39;/authui/& # 39;:, { 　　,,目标:目标, 　　changeOrigin才能:真实 　　}, 　　,& # 39;/供应商/& # 39;:,{ 　　,,目标:目标, 　　changeOrigin才能:真实 　　,} 　　}

其中用到了changeOrigin字段,主要是用于改变请求的头。细化下需求:

<李>

本地开发:指目标向本地主机的某个端口即可。至于主机的验证肯定是不需要的

<李>

部分本地,其他固定的一台远程机器:需要配置localhost和远程的地址,远程地址多半是需要验证主机的

<李>

同二,但机器有多台:需要手动配置多台机器

<李>

同一台远程机器,此时机器可能要严格验证,即IP也必须使用域名,配置好系统主机才可使用

说明:严格验证主机和普通验证主机区别主要在于严格验证时,请求的url必须是远程机器的域名,
不能直接修改请求的头的主机实现,即必须在系统主机层面配置好域名。

分析完成具体需求好,就开始准备实现的方式。原有开发方式是执行<代码> npm dev> npm运行dev - param=paramvalue> npm的脚本代码脚本执行的命令,
它参数的获取无法通过过程。env获得,而且通过<代码> process.env。npm_config_paramName> 使用现成的命令行参数解析库也不是很方便,但为了省事,暂时还是使用npm自带的解析。

请求发起过程中需要以下几个参数:

<李>

主持人:发起请求需要指向的主机,可能每台机器验证并不相同

<李>

端口:代理转发的端口

<李>

接收机:用于推的远程地址,内包含了ip地址,为了省的事,没有单独列出ip地址

然后定义代理请求自定义类型,用于配置:

<李>

本地:本地地址,即localhost

<李>

远程:指定的远程机器

<李>

其他自定义类型:用于在配置文件中已经指定的其他类型

<李>

原版本的请求,如& # 39;http://xxx& # 39;或者对象类型的配置,此类代理永不处理

根据需要,我们添加以下几个参数用于控制代理指向地址:

<李>

采访:远程机器的地址

<李>

专注:严格模式,所有自定义类型的代理转换为指定的rd机器,只在存在rd参数时可用

<李>

allLocal:自定义类型代理全部指向本地

<李>

主持人:请求发现是否使用主机上,而不是IP地址

总结一下(序号指向前面的需求):

<李>

需要使用主机进行访问的情形:4

<李>

需要更改主持人:除主机外都需要更改

<李>

需要对已有类型进行转换:1:需要将所有自定义类型都转换为地方、2和3:什么也不转换,4:所有的自定义类型全部转换为

<强>远程类型

这么一看,貌似主机是不需要的,它的存在主要是针对某些机器可能需要使用主机的方式,所以还是保留一下。

<强>实现

逻辑理清了就很简单了,配置文件设置为:

module.export =, { 　　,rd1: { 　　,,主持人:& # 39;dev1.example.com& # 39; 　　,,端口:8838 　　接收机才能:& # 39;http://1.1.1.1:8888接收机# 39; 　　}, 　　,以rd2: { 　　,,主持人:& # 39;dev2.example.com& # 39; 　　,,端口:8838 　　接收机才能:& # 39;http://1.1.1.1:8888接收机# 39; 　　,} 　　}

proxyTable配置方式

{ 　　,proxyTable: { 　　& # 39;才能/api1& # 39;:, & # 39;远程# 39; 　　& # 39;才能/api2& # 39;:, & # 39;以rd2 # 39; 　　& # 39;才能/认证/xx # 39;:, & # 39;当地# 39; 　　& # 39;才能/其他# 39;:,& # 39;http://example.com& # 39; 　　,} 　　}

怎么在Vue项目中设置代理