nodejs抓取动态网页(用nodejs配置代理服务器，我们需要借助两个npm包，一个)

　　nodejs抓取动态网页(用nodejs配置代理服务器，我们需要借助两个npm包，一个)

　　题图 From Geek Time From Clm

　　前端开发人员在工作中经常会遇到跨域问题。一般来说，我们主要使用以下方法来解决跨域问题：

　　1、jsonp

　　2、cors

　　3、配置代理服务器。

　　jsonp 不是很灵活。它只能发送 get 请求，但不能发送 psot 请求。虽然cors可以支持多种请求格式，但是如果请求携带cookies，需要分别配置服务端和客户端，也很麻烦。

　　与前两者相比，使用代理服务器解决跨域问题要简单得多。

　　由于同源策略，浏览器在不同域名之间发送ajax请求，响应数据不会被浏览器加载。服务器到服务器的请求不受同源策略的限制。

　　下图是代理服务器的原理：

　　代理服务器只起中继作用。配置代理服务器的方式有很多种，比如使用apache、nginx、tomcat等，今天给大家介绍一下用nodejs配置代理服务器，用nodejs配置代理服务器。我们需要用到两个npm包，一个是web开发框架express，一个是express中间件http-proxy-middleware。

　　第一步用express搭建两台服务器，一台端口号为3000的静态资源服务器和一台端口号为5000的接口服务器。静态资源服务器代码如下：

　　var express = require(express);var app = express();app.use(express.static(./public));app.listen(3000);

　　并在public文件夹下创建一个.html，在页面中使用jquery，并使用jquery发送ajax向接口服务器发送测试请求。

　　a.html代码如下：

　　然后搭建一个接口服务器，接口服务器的端口号为5000，代码如下：

　　看代码，我们设计了三个接口，都是get请求，只是url不同。

　　此时启动静态资源服务器和接口服务器，然后访问静态资源服务器下的a.html。结果如下：

　　如图所示，出现跨域。此时，http-proxy-middleware中间件安装在静态资源服务器中，并集成到静态资源服务器中。

　　代码显示如下：

　　此时重启静态资源服务器，在a.html页面中稍微更改发送ajax的地址，如图：

　　观察代码：我们的代码原来是直接请求5000端口服务器的数据，现在改成相对路径。与当前网页所在的服务器相比，当前网页所在的静态服务器端口为3000。

　　当我们访问 ::3000/a.html 时，结果如下：

　　看看ajax请求的地址是怎么拼接的：

　　结论：相对路径是自动连接的。

　　查看请求的结果，是成功的：

　　跨域成功，当然这个不严谨，浏览器不参与跨域，但是页面中ajax请求的地址还是3000端口的服务，但是3000端口的服务接收到请求并转发给5000端口服务，5000端口服务结果原封不动返回给浏览器。

　　回看上面的代码，我们只是在静态资源服务器中应用了 http-proxy-middleware 中间件。这个中间件的使用非常简单，可以分为以下几个步骤：

　　1、安装并导入到项目中。

　　2、通过 app.use 挂载中间件。这里需要注意的是，在挂载这个中间件的时候，app.use需要设置一个pre-route来和项目的原创路由区分开来。

　　调用该中间件时，需要设置几个常用参数：

　　1、target，指的是目标网站，或者代理的网站。

　　2、changeOrigin 是否改变主机。默认为 false，不被覆盖。

　　3、pathRewrite 路径重写，这个特性取决于需求。

　　简单配置：

　　如果这样配置，当在a.html中发送请求时，写：

　　这个请求会被静态资源服务器翻译成：

　　:5000/api/a

　　也就是说，如果没有设置pathRewrite，页面中的请求地址会原封不动地追加到目的服务器地址上。

　　而如果真正的接口地址是这样的：

　　:5000/b

　　如何配置代理服务器？

　　此时在页面中发送请求：

　　此时根据代理服务的重写规则，最终的请求地址为：

　　:5000/b

　　以上就是pathRewrite的作用。

　　然后看changeOrigin的作用。当我们将 changeOrigin 设置为 true 时，我们在接口服务器上打印 req.headers 以查看结果是什么：

　　仔细观察host是localhost:5000，把changeOrigin改成false？再次打印 req.headers ：

　　此时检查主机是否为localhost:3000，

　　changeOrigin 是是否重写请求头中的主机。代理服务器会在请求头中添加对应的Host头，然后目标服务器可以根据这个头来区分要访问的站点。如果你在本地80端口设置一个apache服务器，则服务器配备两个虚拟站点，设置代理后changeOrigin为true。至此，就可以正确访问虚拟主机下的文档内容了。否则访问 ab 站点就相当于访问 localhost。当然，如果你的服务器没有配置虚拟主机，你可以省略这个参数，就像上面演示的代码一样，你可以完全省略这个参数。因为接口服务器没有设置虚拟主机。

　　以上就是用nodejs搭建代理服务器的知识。这个 http-proxy-middleware 中间件被广泛使用。这个中间件内置在 vue-cli 或 create-react-app 生成的项目中。配置规则基本和上面一样，有什么问题可以留言。

　　每天进步一点点，大家互相鼓励，虽然是假期，但也不能放松。

　　代码地址