webpack 前后端分离开发接口调试解决方案,proxyTable解决方案
来源:互联网 发布:nginx配置静态目录 编辑:程序博客网 时间:2024/06/05 21:15
webpack 前后端分离开发接口调试解决方案,proxyTable解决方案
如果你有单独的后端开发服务器 API,并且希望在同域名下发送 API 请求 ,那么代理某些 URL 会很有用。
dev-server 使用了非常强大的 http-proxy-middleware 包。更多高级用法,请查阅其文档。
在 localhost:3000
上有后端服务的话,你可以这样启用代理:
proxy: { "/api": "http://localhost:3000"}
请求到 /api/users
现在会被代理到请求 http://localhost:3000/api/users
。
如果你不想始终传递 /api
,则需要重写路径:
proxy: { "/api": { target: "http://localhost:3000", pathRewrite: {"^/api" : ""} //后面可以使重写的新路径,一般不做更改 }}
默认情况下,不接受运行在 HTTPS 上,且使用了无效证书的后端服务器。如果你想要接受,修改配置如下:
proxy: { "/api": { target: "https://other-server.example.com", secure: false }}
有时你不想代理所有的请求。可以基于一个函数的返回值绕过代理。
在函数中你可以访问请求体、响应体和代理选项。必须返回 false
或路径,来跳过代理请求。
例如:对于浏览器请求,你想要提供一个 HTML 页面,但是对于 API 请求则保持代理。你可以这样做:
proxy: { "/api": { target: "http://localhost:3000", bypass: function(req, res, proxyOptions) { if (req.headers.accept.indexOf("html") !== -1) { console.log("Skipping proxy for browser request."); return "/index.html"; } } }}
如果你使用的vue-cli开发 他同样提供了 proxyTable 和上面的操作一样
以下是我出于无奈改造的
const targetPath='http://172.16.3.48:8080';//服务器的地址 可以是www.xxx.comconst pathX='/*';//如果打包后接口地址为fwone-central/orderinfo/* 则pathX='/*' 如果是/orderinfo/* 则pathX=''var keysArr=[ pathX+'/orderinfo/*', pathX+'/company/*', pathX+'/person/*', pathX+'/person/*/*', pathX+'/oncall/*', pathX+'/Tr/*', pathX+'/calldetail/*', pathX+'/customernotification/*', pathX+'/customernotification/*/*/*', pathX+'/sys/*', pathX+'/sys/*/*', pathX+'/invoice/*', pathX+'/contractservicedetails/*', pathX+'/customercomplain/*', pathX+'/callreminder/*',]for(let i=0;i<keysArr.length;i++){ config.dev.proxyTable[keysArr[i]]={ target:targetPath, secure: false, changeOrigin: true, }}console.info(Object.keys(config.dev.proxyTable))module.exports= config
我先说一下我为什么这么做,我们本地开发直接常规的写法没有问题但是如果部署到测试服务器上,一个tomcat跑多个项目我们后端是用文件夹来区分项目的,但是这个区分后似乎会影响接口路径 ,也就是说
原本是‘/’ 现在变成了 ‘/fwone-central’
我一开始以为这样也很好解决 我直接把target 改成 'http://172.16.3.48:8080/fwone-central' 接口报404
然后
'/fwone-central/orderinfo/*': { target:'http://172.16.3.48:8080', secure: false, changeOrigin: true, },//这样又ok 其实我看请求的地址是一样一样的
所以我无奈做了上面的修改 也许你不知道我在说什么,因为你没有遇到过,或者你永远遇不到.
当然上面的问题还有坑 当你在请求数据的时候,原本是这样的没有问题 ,但是你部署后路径改变了,这个请求路径也就无效了
axios({ method: 'get', url:'/orderinfo/count' , params: {orderStateIds: [1, 2, 3, 4, 5, 6, 7, 8]} }).then(function (r) { if (r.data.code == 0) { //... } }); }).catch(function (error) { console.error(error); })
解决办法,是有流传已久的绝对路径和公共路径
window.localPath='http://localhost:8087/fwone-central' //他可以定义在首页随时顺着项目路径修改axios({ method: 'get', url:localPath+'/orderinfo/count' , params: {orderStateIds: [1, 2, 3, 4, 5, 6, 7, 8]} }).then(function (r) { if (r.data.code == 0) { //... } }); cb() }).catch(function (error) { console.error(error); })
还有最后一点需要注意路径改变了打包后的静态资源路径也得改变 所以在vue-cli config.js index.js
build: { assetsSubDirectory: 'statics/mobile', //这是将静态资源打包到指定的文件夹下 assetsPublicPath:'/fwone-central/', // 这是静态资源的路径 },
当然上面的绝对路径可以通过axios的全局配置来设置。
- webpack 前后端分离开发接口调试解决方案,proxyTable解决方案
- Webpack + Tomcat + Nginx/Apache实现前后端开发分离
- 基于webpack的前后端分离开发环境实战
- 开发web app,前后端分离可能会遇到的问题及其解决方案
- 前后端分离开发
- 前后端分离跨域解决方案(反向代理)
- 前后端接口分离-wiremock
- SOSOAPI前后端分离开发模式下的接口测试
- Web开发 项目 前后端分离 接口域名地址 优化
- 前后端分离开发实践
- 全栈开发:前后端分离配置篇(vue+webpack+mock+nginx+laravel)
- 前后端分离架构中的接口设计
- 可视化接口管理工具RAP,前后端分离,
- 前后端分离架构中的接口设计
- java前后端分离项目整合CAS实现单点登录解决方案
- Spring Cloud 前后端分离后引起的跨域访问解决方案
- 谈前后端分离开发模式
- 淘宝前后端分离开发模式实践
- 5位运动员参加了10米台跳水比赛,有人让他们预测比赛结果 A选手说:B第二,我第三; B选手说:我第二,E第四; C选手说:我第一,D第二; D选手说:C最后,我第三; E选手说:我第四,A
- 日本某地发生了一件谋杀案,警察通过排查确定杀人凶手必为4个嫌疑犯 的一个。以下为4个嫌疑犯的供词。 A说:不是我。 B说:是C。 C说:是D。 D说:C在胡说 已知3个人说了真话,1个人说
- 在屏幕上打印杨辉三角。
- ubuntu开启ipv6
- android逆向学习,笔记(二)
- webpack 前后端分离开发接口调试解决方案,proxyTable解决方案
- Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求
- 无穷小微积分微信公众号开通符合发展大方向
- DAY2廖雪峰
- 远程下载文件并读取实例方法
- Python作业-选课系统
- 685. Redundant Connection II
- 技术团队管理:需求之殇——你大妈不是你以前的大妈了,你大爷永远是你大爷
- mac 搜索不到自己家wifi