基于Fetch的HTTP透明代理
本文从属于笔者的Web前端中DOM系列文章.
笔者在浏览器跨域方法与基于Fetch的Web请求最佳实践一文中介绍了浏览器跨域的基本知识与Fetch的基本使用，在这里要提醒两个前文未提到的点，一个是根据附带凭证信息的请求这里描述的，当你为了配置在CORS请求中附带Cookie等信息时，来自于服务器的响应中的Access-Control-Allow-Origin不可以再被设置为 * ，必须设置为某个具体的域名,则响应会失败。另一个就是因为Fetch中不自带Cancelable与超时放弃功能，往往需要在代理层完成。笔者在自己的工作中还遇到另一个请求，就是需要在客户端抓取其他没有设置CORS响应或者JSONP响应的站点，而必须要进行中间代理层抓取。笔者为了尽可能小地影响逻辑层代码，因此在自己的封装中封装了如下方法:
/ * @function 通过透明路由,利用get方法与封装好的QueryParams形式发起请求 * @param BASE_URL 请求根URL地址,注意,需要添加http://以及末尾的/,譬如`http://api.com/` * @param path 请求路径,譬如"path1/path2" * @param queryParams 请求的查询参数 * @param contentType 请求返回的数据格式 * @param proxyUrl 请求的路由地址 */getWithQueryParamsByProxy({BASE_URL=Model.BASE_URL, path="/", queryParams={}, contentType="json", proxyUrl="http://api.proxy.com"}) { //初始化查询字符串,将BASE_URL以及path进行编码 let queryString = `BASE_URL=${encodeURIComponent(BASE_URL)}&path=${encodeURIComponent(path)}&`; //根据queryParams构造查询字符串 for (let key in queryParams) { //拼接查询字符串 queryString += `${key}=${encodeURIComponent(queryParams[key])}&`; } //将查询字符串进行编码 let encodedQueryString = (queryString); //封装最终待请求的字符串 const packagedRequestURL = `${proxyUrl}?${encodedQueryString}action=GET`; //以CORS方式发起请求 return this._fetchWithCORS(packagedRequestURL, contentType);}另外自带缓存的透明代理层的配置为，代码存放于Github仓库:
/ * Created by apple on 16/7/26. */var express = require('express');var cors = require('cors');import Model from "../model/model";import ServerCache from "./server_cache";//创建服务端缓存实例const serverCache = new ServerCache();/ * @region 全局配置 * @type {string} */const hashKey = "ggzy"; //缓存的Hash值const timeOut = 5; //设置超时时间,5秒/ * @endregion 全局配置 *///添加跨域支持var app = express(cors());//默认的GET类型的透明路由app.get('/get_proxy', cors(), (req, res)=> { //所有查询参数是以GET方式传入 //获取原地址 let BASE_URL = decodeURIComponent(req.query.BASE_URL); //获取原路径 let path = decodeURIComponent(req.query.path); //反序列化请求参数集合 let params = {}; //构造生成的全部的字符串 let url = ""; //遍历所有传入的参数集合 for (let key in req.query) { if (key == "BASE_URL" || key == "path") { //对于传入的根URL与路径直接忽略, //封装其他参数 continue; } else { params[key] = decodeURIComponent(req.query[key]); } url += `${key}${req.query[key]}`; } //判断缓存中是否存在值 serverCache.get(hashKey, url).then((data)=> { //如果存在数据 res.set('Access-Control-Allow-Origin', '*'); res.send(data); res.end(); }).catch((error)=> { //如果不存在数据,执行数据抓取 //发起GET形式的请求 const model = new Model(); //判断是否已经返回 let isSent = false; //使用模型类发起请求,并且不进行解码直接返回 model.getWithQueryParams({ BASE_URL, path, params, contentType: "text" //不进行解码,直接返回 }).then((data)=> { if (isSent) { //如果已经设置了超时返回,则直接返回 return; } //返回抓取到的数据 res.set('Access-Control-Allow-Origin', '*'); res.send(data); res.end(); isSent = true; }, (error)=> { if (isSent) { //如果已经设置了超时返回,则直接返回 return; } //如果直接抓取失败,则返回无效信息 res.send(JSON.stringify({ "message": "Invalid Request" })); isSent = true; throw error; }); //设置秒超时返回N setTimeout( ()=> { if (isSent) { //如果已经设置了超时返回,则直接返回 return; } //设置返回超时 res.status(504); //终止本次返回 res.end(); isSent = true; }, 1000 * timeOut ); });});//设置POST类型的默认路由//默认的返回值app.get('/', function (req, res) { res.send('Hello World!'); res.end();});//启动服务器var server = app.listen(399, '0.0.0.0', function () { var host = server.address().address; var port = server.address().port; console.log('Example app listening at http://%s:%s', host, port);});笔者在这里是使用Redis作为缓存:
/ * Created by apple on 16/8/4. */var redis = require("redis");export default class ServerCache { / * @function 默认构造函数 */ constructor() { //构造出Redis客户端 this.client = redis.createClient(); //监听Redis客户端创建错误 this.client.on("error", (err) => { this.client = null; // console.log("Redis Client Error " + err); }); } / * @function 从缓存中获取数据 * @param hashKey * @param url * @returns {Promise} */ get(hashKey = "hashKey", url = "url") { return new Promise((resolve, reject)=> { if (!!this.client) { //从Redis中获取数据 this.client.hget(hashKey, url, function (err, replies) { //如果存在数据 if (!!replies) { resolve(replies); } else { reject(err); } }); } else { reject(new Error("Invalid Client")); } }); } / * @function 默认将数据放置到缓存中 * @param hashKey 存入的键 * @param url 存入的域URL * @param data 存入的数据 * @param expire 第一次存入时候的过期时间 * @result 如果设置失败,则返回null */ put(hashKey = "hashKey", url = "url", data = "data", expire = 60 * 60 * 6 * 1000) { //判断客户端是否有效 if (!this.client) { //如果客户端无效,直接返回null return null; } //第一次设置的时候判断ggzy是否存在,如果不存在则设置初始值 this.client.hlen(hashKey, function (err, replies) { //获取键值长度,第一次获取时候长度为0 if (replies == 0) { //12小时之后删除数据 client.expire(hashKey, expire); } }); //设置数据 client.hset(hashKey, url, data); }}注意，笔者在这里使用的是isomorphic-fetch，因此在服务端与客户端的底层请求上可以复用同一份代码，测试代码如下，直接使用babel-node model.test.js即可:
/ * Created by apple on 16/7/21. */import Model from "./model";const model = new Model();//正常的发起请求model .getWithQueryParams({ BASE_URL: "http://ggzy.njzwfw.gov.cn/njggzy/jsgc/", path: "001001/001001001/001001001001/", queryParams: { Paging: 100 }, contentType: "text" }) .then( (data)=> { console.log(data); } ) .catch((error)=> { console.log(error); });//使用透明路由发起请求model .getWithQueryParamsByProxy({ BASE_URL: "http://ggzy.njzwfw.gov.cn/njggzy/jsgc/", path: "001001/001001001/001001001001/", queryParams: { Paging: 100 }, contentType: "text", proxyUrl: "http://153.3.251.190:11399/" }) .then( (data)=> { console.log(data); } ) .catch((error)=> { console.log(error); });关键字：dom, fetch
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
