使用node转发请求
SegmentFault
共 1680字,需浏览 4分钟
· 2020-09-16
作者:小豪看世界
来源:SegmentFault 思否社区
前言
本篇文章基于 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();
});
最后再打开浏览器查看,大功告成,接口转发成功~
完整代码:
https://github.com/zhongzihao1996/my-blog/blob/master/22_%E4%BD%BF%E7%94%A8node%E8%BD%AC%E5%8F%91%E8%AF%B7%E6%B1%82/server.js
评论
金融研究 | 使用Python测量关键审计事项的「信息含量」
Tips: 公众号推送后内容只能更改一次,且只能改20字符。如果内容出问题,或者想更新内容, 只能重复推送。为了更好的阅读体验,建议阅读本文博客版, 链接地址https://textdata.cn/blog/2023-01-13-information-content-of-critical-aud
大邓和他的Python
0
金融研究(更新) | 使用Python构建关键审计事项的「信息含量」
Tips: 公众号推送后内容只能更改一次,且只能改20字符。如果内容出问题,或者想更新内容, 只能重复推送。为了更好的阅读体验,建议阅读本文博客版, 链接地址https://textdata.cn/blog/2023-01-13-information-content-of-critical-aud
大邓和他的Python
0
词向量(更新) | 使用MD&A2001-2022语料训练Word2Vec模型
buTips: 公众号推送后内容只能更改一次,且只能改20字符。 如果内容出问题,或者想更新内容, 只能重复推送。 为了更好的阅读体验,建议阅读本文博客版, 链接地址https://textdata.cn/blog/2023-03-24-load-w2v-and-expand-your-concpe
大邓和他的Python
0
管理世界2024 | 使用管理层讨论与分析测量「企业人工智能指标」
Tips: 公众号推送后内容只能更改一次,且只能改20字符。如果内容出问题,或者想更新内容, 只能重复推送。为了更好的阅读体验,建议阅读本文博客版, 链接地址 https://textdata.cn/blog/2024-04-19-ai-improve-firm-productivity/
大邓和他的Python
0
GPT的风也吹到了CV,详解自回归视觉模型的先驱! ImageGPT:使用图像序列训练图像 GPT模型
作者丨科技猛兽编辑丨极市平台导读 在 CIFAR-10 上,iGPT 使用 linear probing 实现了 96.3% 的精度,优于有监督的 Wide ResNet,并通过完全微调实现了 99.0% 的精度,匹配顶级监督预训练模型。本文目录1 自回归视觉模型的先驱 ImageGPT:
机器学习初学者
0
代码 | 使用 MD&A文本测量「企业不确定性感知FEPU」
Tips: 为了更好的阅读体验,建议阅读本文博客版, 链接地址https://textdata.cn/blog/2024-04-25-firm-economic-policy-uncertainty/本文使用的缩写EPU 经济政策不确定性(Economic Policy Uncerta
大邓和他的Python
0
面试官:在原生input上面使用v-model和组件上面使用有什么区别?
前言面试官:vue3的v-model都用过吧,来讲讲。粉丝:v-model其实就是一个语法糖,在编译时v-model会被编译成:modelValue属性和@update:modelValue事件。一般在子组件中定义一个名为modelValue的props来接收父组件v-model传递的值,然后当子组
高级前端进阶
0
使用 GitHub Actions 构建 Golang PGO
今年 2 月,我宣布 Dolt 版本现已构建为配置文件引导优化 (pgo) 二进制文件,利用 Golang 1.20 的强大功能将 Dolt 的读取性能提高 5.3%。在我宣布这一消息之前,我们的一位常驻 Golang 专家 Zach 试验并测试了 Golang 的 pgo 功能
GoCN
0