使用Nodejs代理实现访问跨域API

in 前端技术 with 0 comment

CUHyzd.md.jpg

part.1 问题简述

由于浏览器的跨域限制策略,
导致我们不能随心所欲的去与web部署在不同的"域"获取我们想要的数据
前端技术中,总结了多种实现跨域访问的策略
本文展示的则是通过Nodejs代理实现跨域

part.2 思路描述

首先,浏览器的跨域限制策略并没有封杀所有跨域情景,以下几个情景下,浏览器允许跨域访问:

其中,最后一种情景最为干净直接
但是大多数网站出于安全考虑
通常不会设置允许跨域访问的响应头
于是就出现了如下的应对策略

part.3 代码实现

首先通过npm安装node的request模块
npm install request --save

然后编写代理服务器的代码

//proxy.js:

//引入http模块
const http = require('http');
//引入reuqest模块
const request = require('request');

//指定主机,默认为本机
const hostname = '127.0.0.1';
//指定端口
const port = 8010;

const apiServer = http.createServer((req, res) => {
 //将目标api与代理服务器收到的url拼接到一起,本次使用的时知乎日报的API
 const url = 'http://news-at.zhihu.com/api/4' + req.url;
 //request方法的配置对象
 const options = {
  url: url
 };

 //收到响应后的回调函数

 function callback(error, response, body) {

  //判断请求是否成功
  if (!error && response.statusCode === 200) {
   //设置编码类型
   res.setHeader('Content-Type', 'text/plain;charset=UTF-8');
   //设置所有域允许跨域
   res.setHeader('Access-Control-Allow-Origin', '*');
   res.end(body);
  }
}

 //发送get请求
 request.get(options, callback);

});

apiServer.listen(port, hostname, () => {
 console.log(`接口代理运行在http://${hostname}:${port}/`);
});

代理服务器搭建好之后,启动代理服务器
node proxy.js
就可以让我们的web应用去获取数据了

part.4 测试

简单写个html页面,使用jquery的ajax去获取数据

<!--index.html-->

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
 <meta charset="utf-8">
 <title>test</title>
</head>

<body>

 <button id="b01" type="button">获取数据</button>

 <script src="node_modules/jquery/dist/jquery.js" charset="utf-8"></script>

 <script type="text/javascript">

  $(document).ready(function() {
   $("#b01").click(function() {
    var htmlobj = $.ajax({
     url: "http://localhost:8010/themes",
     async: false
    });
    var result = eval("(" + htmlobj.responseText + ")");
    console.log(result);
   });
  });

 </script>
</body>

</html>

打开html页面,查看控制台,获取数据如下:
Cah1QP.png

Responses