今天在联调的时候,由于后端的问题导致接口出现了跨域问题。
使用接口请求工具可以请求到数据,但是一旦把服务跑起来,就会报跨域的问题。
由于自己之前简单学习了一下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));
        });
});

最近忙着搬家和加班,着实没有时间写日拱一卒,落下了好几天,今天终于恢复。


Edward
54 声望3 粉丝

宁可十年不将军,不可一日不拱卒