今天在联调的时候,由于后端的问题导致接口出现了跨域问题。
使用接口请求工具可以请求到数据,但是一旦把服务跑起来,就会报跨域的问题。
由于自己之前简单学习了一下mock数据的方法,于是想着,那不如写一个简单的请求转发的工具,这样就能解决跨域问题了。
使用的工具是express和axios。
先根据express的官方文档,安装express generator:
npm i -g express-generator
express --view=pug myapp
cd myapp
npm install
为了便于修改文件而不用不停地重启服务,我还安装了nodemon:
npm i nodemon -g
之后便可以愉快地启动项目:
nodemon start
接下来就是正式开始写请求转发。
当然此处我没有完全实现,因为post请求的body一直拿不到,即使用了body-paser也一样。此处只讲get请求的处理:
首先写一个接口:
router.get("/index", (req, res, next) => {
const data = {};
res.send(data);
});
这样就实现了一个接口,可以通过接口请求工具进行请求了。比如本地服务是跑在3000端口的,那么就可以通过"http://localhost:3000/index"访问该接口,返回的结果应该是一个空对象。
但是我们还要实现接口转发,也就是要拿到别的接口的数据,这时候就要用到axios。
首先安装axios:
npm i axios
然后在项目中引用:
var axios = require("axios");
接着就是正式使用axios请求数据并返回:
axios.get("http://www.baidu.com/api").then(response => {
res.send(response);
});
这个时候,我们尝试着请求接口,发现是拿不到数据的,而且服务会报错。是因为我们需要对数据进行解析后再返回,所以需要引入util这个包。
var util = require("util");
之后将接口改写成如下模样:
axios.get("http://www.baidu.com/api").then(response => {
res.send(util.inspect(response.data));
});
至此就实现了一次完整的请求转发。
如果要实现post请求也是可以的,关键点就是要拿到前端传过来的请求体,这个目前我还没研究,等下次再写。
顺便贴一下接口转发的完整代码:
router.get("/index", (req, res, next) => {
axios
.get("http://www.baidu.com/api")
.then(response => {
res.send(util.inspect(response.data));
});
});
最近忙着搬家和加班,着实没有时间写日拱一卒,落下了好几天,今天终于恢复。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。