Axios+NodeJs+Express代理跨域解决方案

何为跨域？

当你的前端项目地址为127.0.0.1:3000时，在前端利用Axios或Ajax请求其他网址数据/接口时（如：www.baidu.com/login ），将产生跨域问题，获取不到你想要的数据。

解决方案：利用NodeJs建立中转微服务，避过前端跨域问题，在服务器中请求其他地址数据/接口，将不会产生跨域并且正常获取数据。

以简书中的一个首页列表接口为例，正常情况下，我们利用前端技术Axios或Ajax是获取不到接口内的数据。我们用下列的接口来尝试一下正常get,应该是获取不到数据的。（环境：Vue-cli 4.0 / Axios / Nodejs / Express ,请自行搭建相应环境，这里将不再口述如何搭建。）

接口地址： type : ' get ' count="15"

https://www.jianshu.com/asimov/trending/now?count=15&note_ids=

image

按F12可以看到，报错了，并且NetWork内访问失败。现在我们利用NodeJs / Express / axios 做一个简单的微服务器。如下代码（可直接复制粘贴）；

//导入express框架
const express = require("express");
//导入axios插件
const axios =require("axios");
//初始化express
const app = express();

//本地服务器解决跨域，不可缺
app.all('*', function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    //Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    res.header('Access-Control-Allow-Methods', '*');
    res.header('Content-Type', 'application/json;charset=utf-8');
    next();
  });

//get接口访问，访问自己这个服务器接口
app.get("/getlist",function(req,res){
    //服务器获取数据，将不会产生跨域问题
    axios.get("https://www.jianshu.com/asimov/trending/now?count=15&note_ids= ")
    .then((response) => {
        //以json格式将服务器获取到的数据返回给前端。
        res.json(response.data);
    })
})
//启动server，端口3000
var server = app.listen(3000,function(){
    console.log("开启成功！");
})

再次访问自己这个服务器上写的接口：http://localhost:3000/getlist ，将去取简书首页列表数据返回给我们用。
前端页面：

QQ截图20200220162259.png

写好的服务器页面和最终效果：

QQ截图20200220162231.png