DDR爱好者之家 Design By 杰米
前言
本篇文章基于 vue、node(koa)
需求
vue 项目开发过程中,接口跨域是一个很常见的问题。在开发时候可以用 vue 自带的 proxy 可以轻松解决。生产环境下,前端项目往往是部署在后端项目下,不会存在跨域的问题,接口前缀可以忽略。
dev 环境下,请求一个产品列表接口,我们可能会这么做:
https://www.baidu.com/api/product/list
生产环境下,前缀可以忽略:
/api/product/list
问题来了,如果我们想在本地测试生产环境下的前端项目,会存在跨域的问题;发给后端部署项目又太麻烦,修改代价太大。我们可以自己部署一个简易的 node 服务,来部署自己的前端项目~
实现
0. 安装依赖
npm i koa --save-dev npm i koa-static --save-dev npm i koa-mount --save-dev npm i http-proxy-middleware --save-dev npm i koa2-connect --save-dev
1. koa 搭建简易服务端
引入 koa,然后监听端口
const Koa = require('koa'); const Koa = require('koa'); const path = require('path'); const app = new Koa();; const port = process.env.PORT || 3000; app.listen(port, () => { console.log(` Your application is running here: http://localhost:${port}`); });
开放 dist(即打包出来的目录)
const koaStatic = require('koa-static'); const koaMount = require('koa-mount'); // 开放目录 app.use(koaMount('/', koaStatic(resolve('../dist'))));
这样差不多就完成了,跑服务然后打开 3000 端口,项目能够正常访问:
2. 转发接口请求
项目是能正常请求了,可是还需要处理接口问题,即 node 当成中间件,转发前端接口请求到真正的后端接口
const { createProxyMiddleware } = require('http-proxy-middleware'); const k2c = require('koa2-connect'); app.use(async (ctx, next) => { const url = ctx.path; if (url.startsWith('/api')) { ctx.respond = false; await k2c( createProxyMiddleware({ target: # 后端的接口地址, changeOrigin: true, secure: false, }), )(ctx, next); } return await next(); });
最后再打开浏览器查看,大功告成,接口转发成功~
完整代码
完整代码
总结
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年05月18日
2024年05月18日
- 群星《承欢记 电视剧影视原声带》[320K/MP3][109.99MB]
- 【欧美乡村】JohnnyLee-2024-13thOfJulyandEmotions(FLAC)
- 【流行爵士】PattiAustin-2024-LoveSongs(FLAC)
- 【爵士乐】VA-2024-SupremeLoungeChillSelectionJazzyVibeTunes(FLAC)
- 群星《承欢记 电视剧影视原声带》[FLAC/分轨][219.8MB]
- 群星《乘风2024 第1期》[320K/MP3][110.09MB]
- 群星《乘风2024 第1期》[FLAC/分轨][322.4MB]
- 【古典音乐】卡拉扬《莫扎特·魔笛(全剧)》2CD.2015[FLAC+CUE整轨]
- Yurika《ただいま》【Hi-Res】24bit-96kHz【flac】
- 张琍敏2006-金鼎奖系列14[台湾版]CD1[WAV+CUE]
- 林一峰2008-城市旅人[香港首版][WAV+CUE]
- 群星1990-六个梦电视原声带[日本版][WAV+CUE]
- [In-Akustik7801]KissedByASong-《Dynaudio丹拿发烧示范盘》(2014)HQCD[WAV+CUE]
- 群星《17号音乐仓库2 第10期》[320K/MP3][66.53MB]
- 群星《17号音乐仓库2 第10期》[FLAC/分轨][163.67MB]