Node+Express接口代理，为更好的开发体验

2018-02-27

同源策略：协议+主机名+端口号相同

在前后端分离开发过程中，资源请求跨域限制问题是人人都会面对的一种情况。
跨域限制产生的原因是浏览器的“同源策略”，这也是基于网络安全考量所提出的。

网上也给出了很多相应的跨域解决方案例如jsonp、CORS、WS、代理服务器.
本文就 “代理服务器” 的原理和实战展开，让大家快速掌握并解决开发环境下跨域的问题。

起子

跨域问题的根本是网络安全
浏览器“同源策略”产生的原因可见此篇文章

就如今前后端项目分离的情况来看，大部分项目是在开发阶段分离前后端，譬如我司，前端用vue搭建项目，负责产品的用户界面；后端用Java向前端提供数据接口，在各自开发完成后再将项目一同放在服务器下进行测试，然后发布。

在这种开发模式下，经常遇到后台同事在本地写好接口（此时后台同事一般会在本地启服务器）后，需要和前端一起调试接口的情况，这时我们面临两种选择：

后台将代码上传到SVN/GIT后，我在下载到本地进行调试。每次调试都要这样，太过繁琐，放弃。
直接调用后台同事本地服务器上的接口。跨域问题？？？

下来我们来谈谈使用代理服务器作为我们跨域解决方案，还是以 WWH 原则进行讲述。

WHAT 什么是代理服务器？

假设我在本地主机A上开发项目，需要调用同事服务器B上的接口，直接$.get( ‘http://192.168.11.111/userInfo‘ )，肯定会遇到不允许跨域的问题，此时通过一个允许跨域的服务器C对服务器B的接口进行访问，就可以解决这个问题了。
所以，代理服务器之所以称之为代理，是其充当了一个桥梁的角色。

WHY 为什么使用这种方案？

代理服务器最直接的好处就是一次配置，长期使用。

通过我们本地建立代理服务器后，以后每次需要面对上述情况时，就可以拿出来使用，最多切换一下目标服务器IP地址。
在调试完成后，我们可以直接 CTRL+H 把proxy的IP替换就可以上传到服务器了。

上图是我在开发中用到的接口服务器IP

HOW 如何使用？

首先说下运行环境，由于我们是用Node+Express搭建的代理服务器请求其它服务器上的数据，所以我们一共需要Node+Express+Request这3个玩意，接下来进入coding。

1.服务器环境搭建

Node相信大家电脑上都有，没有的话自行解决…
找一个你顺眼的目录作为代理服务器的家，然后打开命令行工具输入:

1
2
3

npm init

cnpm i --save express request

完成后别关闭CMD

2.编写js文件

通过上面两步环境就搭好了，现在在该目录下新建一个proxy.js文件，放入以下代码：

"use strict";
const express = require('express');
const request = require('request');

const app = express();

//let serverUrl='http://192.168.18.158';    //同事A的服务器地址
let serverUrl='http://192.168.18.182';    //同事B的服务器地址

function setAllowHeader(res){   // 配置响应header 允许跨域访问
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    return res;
}

app.use('/test', function(req, res) {   //测试，可删除
    res.send('Server is working');
});

app.use('/', function(req, res) {   //转发请求并返回response
    res = setAllowHeader(res);
    let url = serverUrl + req.url;
    req.pipe(request(url)).pipe(res);
});
 
app.listen(3000,'127.0.0.1', function () {  //代理服务器地址和端口
  console.log('server is running at port 3000');
});

是的，只需要手写一个js文件就可以了，具体内容可见注释。

3.品尝果实

切换到第1步中未关闭的命令行，输入

1	node proxy.js

然后浏览器中输入 “http://localhost:3000/test“ ,此时看到界面上的 “Server is working” 则表示代理服务器已经运行，现在可以试试访问同事的接口了。
例：
访问服务器 192.168.18.182 上的 ‘/versioninfo/getFirstPageData’ 接口数据

可以看到我们直接访问刚刚创建的代理服务器+接口，已经能够拿到数据。

结语

本篇旨在让大家便捷的解决开发过程中跨域的问题，希望喜欢。