vue proxy配置,proxyTable
这篇文章主要介绍了某视频剪辑软件之代理表代理超全面配置流程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
前言介绍配置分离1.proxyTableHandler.js效果如下
前言
用了某视频剪辑软件有一年多了，从最初的摸着石头过河到现在已经能熟练的使用某视频剪辑软件开发项目，学到了许多，特别是某视频剪辑软件的代理配置让我眼前一亮，甚是喜欢，故将自己对代理表代理配置整理出来，供致力于的开源的同辈浏览，望大家手下留情，哈哈_。
介绍
某视频剪辑软件的代理表是用于开发阶段配置跨域的工具，可以同时配置多个后台服务器跨越请求接口，其真正依赖的新公共管理包是超文本传送协议（Hyper Text Transport Protocol的缩写）代理中间件，在开源代码库上拥有更丰富的配置，按需配置咯。
配置分离
我将代理配置抽离出2个配置文件
1. config.dev.js
用于配置后端服务器地址、端口和互联网协议(互联网协议)等
2. proxyTableHandler.js
用于添加代理的配置项
配置文件如下
/*
* 开发环境服务器配置
* @作者：吴江
* @日期：2018-08-16 11:32:36
* @最后修改人：吴江
* @最后修改时间：2018-08-18 23:04:34
*/
模块。导出={
//开发环境代理服务器
devProxy: {
主机： 0.0.0.0 ，//ip/localhost都可以访问
端口：8080
},
//后端服务器地址
服务器：{
默认值：“http://localhost:8081/spring boot-girl”，
JSP: http://localhost:8082/spring boot-JSP
}
}
proxyTableHandler.js如下
/*
* 开发环境代理配置生产环境请使用服务器配置代理或其他方式
* @作者：吴江
* @日期：2018-08-16 17:16:55
* @最后修改人：吴江
* @最后修改时间：2018-08-19 09:18:18
*/
const configDev=require(./config。开发’)
module.exports=(()={
设proxyApi={}
让servers=configDev.servers
for(对象的字母键。密钥(服务器)){
proxyApi[`/${key}`]={
//传递给http(s)请求的对象
目标：服务器[答案]，
//是否将主机头的源更改为目标统一资源定位器
更改来源：真的，
//是否代理求转发到
ws:没错，
//是否验证加密套接字协议层证书
安全：假，
//重写字段标头的域，删除域名
cookieDomainRewrite:" "，
//代理响应事件
onProxyRes: onProxyRes，
//重写目标的全球资源定位器(统一资源定位器)路径
路径重写：{
[`^/${key}`]:]
}
}
}
返回普罗克斯亚皮
})()
/**
* 过滤甜饼干路径，解决同域下不同路径，cookie无法访问问题
* (实际上不同域的甜饼干也共享了)
* @param proxyRes
* @param请求
* @param res
*/
函数onProxyRes (proxyRes，req，res) {
let cookie=proxy RES . headers[ set-cookie ]
//目标路径
let originalUrl=req.originalUrl
//代理路径名
让代理名称=原始URL。split(/)[1]
//开发服全球资源定位器(统一资源定位器)
让server=config dev。服务器[代理名称]
//后台工程名
设项目名称=服务器。子串(服务器。lastindexof(/)1)
//修改甜饼干路径
如果(饼干
让新cookie=cookies。映射(函数(cookie){
如果(cookie。(` path=/$ { project name } `)=0){
曲奇=曲奇。替换(` Path=/$ {项目名称} `，Path=/)
返回饼干。替换(` Path=//`， Path=/)
}
返回甜饼干
})
//修改甜饼干路径
删除proxyRes.headers[set-cookie]
代理搜索头[ set-cookie ]=新cookie
}
}
使用方式配置/索引。射流研究…
const configDev=require( ./config。开发’)
模块。导出={
开发人员：{
//路径
资产子目录：静态，
资产公共路径："/"，
proxyTable: proxyTableHandler，
//各种开发服务器设置
主机：configDev.devProxy.host，//可以被进程.环境.主机覆盖
端口：configDev.devProxy.port，//可以被process.env.PORT覆盖，如果端口正在使用，将确定一个空闲的端口
autoOpenBrowser: false，
错误覆盖：真，
notifyOnErrors: true，
poll: false，//https://web pack。js。org/configuration/dev-server/# devserver-watch选项-
//使用Eslint加载器？
//如果为没错，您的代码将在绑定和
//林挺错误和警告将显示在控制台中。
使用列表：真的，
//如果为没错，伊斯林错误和警告也将显示在错误覆盖中
//在浏览器中。
showeslninterrossinoverlay:假，
/**
*来源地图
*/
//https://web pack . js . org/configuration/dev tool/# development
开发工具："廉价模块评估源地图",
//如果在开发者工具中调试某视频剪辑软件文件时遇到问题，
//将此设置为错误-它*可能*有所帮助
//https://vue-loader . vue js . org/en/options . html # cache busting
破坏声望：没错，
cssSourceMap: true
}
}
效果如下
以/jsp开头的美国石油学会(美国石油协会)
以/默认开头的美国石油学会(美国石油协会)
至此配置代理成功！
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。