vue proxyTable代理 解决开发环境的跨域问题
2024-08-29 23:06:41
如果我们项目请求的地址为 htttp://xxxx.com/a/b/c
可以设置代理为:
dev:{
assetsSubDirectory: 'static',// 静态资源文件夹
assetsPublicPath: '/',// 发布路径
proxyTable: { // 代理配置表,在这里可以配置特定的请求代理到对应的API接口 // 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx' // 使用方法:https://vuejs-templates.github.io/webpack/proxy.html
'/a': {
target: htttp://xxxx.com/a',
// secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true,
// 如果接口跨域,需要进行这个参数配置
pathRewrite: {
'^/a': ''
}
}
}
}
例如:接口地址原本是 /save/index,但是为了匹配代理地址,在前面加一个 /api, 因此接口地址需要写成这样的即可生效 /api/save/index。
注意: '/api' 为匹配项,target 为被请求的地址,因为在 请求的 url 中加了前缀 '/api',而原本的接口是没有这个前缀的,所以需要通过 pathRewrite 来重写地址,将前缀 '/api' 转为 '/'。如果本身的接口地址就有 '/api' 这种通用前缀,就可以把 pathRewrite 删掉。
项目中常见的:
项目中请求的地址应该为 axios.get('/a/b/c'),代理解析时会在a前面加上" htttp://xxxx.com"变成了" htttp://xxxx.com/a/b/c",
当项目打包上线时,代码里的请求地址不需要改动,因为当线上代码运行时,遇到 axios.get('/a/b/c') ,a前面有个‘/’代表根目录的意思。
所以‘/a/b/c’会被解析为 postname+port+'a/b/c',所以请求地址为 ‘htttp://xxxx.com/a/b/c
’。
最新文章
- SQL Server 2016 CTP2.2 安装手记
- c#静态构造函数 与 构造函数 你是否还记得?
- Object.observe
- [deviceone开发]-QQ分享、微信分享和新浪微博分享
- android混合开发,webview的java与js互操作
- (document).height()与$(window).height()区别
- c#通过反射获取类上的自定义特性
- mfc EDIT字体颜色
- static timing analysis 基础
- 一起来开发Android的天气软件(四)——使用Gson解析数据
- intent,实现两个活动之间数据的传递
- c#访问oracle数据库
- python装饰器实现对异常代码出现进行监控
- 【JS】CharToAsciiToBinaryToAsciiToChar
- Achievements
- Mybatis 缓存失效的几种情况
- Win10系列:C#应用控件基础20
- Vue2.0,Express实现的简单跨域
- 资源 | 源自斯坦福CS229,机器学习备忘录在集结
- SQL脚本运行