专栏首页猫哥学前班使用 Whistle 作为 API 服务网关
原创

使用 Whistle 作为 API 服务网关

最近写了一款 React 的工具,能拉取团队成员 Jira 上的 Task 和 Bug,根据其 Task 的 Efforts 时长和 Bug 的修复时长,计算对应的绩效指标。

今天给大家介绍下,我是如何在这个项目中利用 Whistle 来实现 API 服务网关的(还不知道 Whistle ?看这里)。

在项目开发过程中,前端本地的 webpack 会启动服务并监听一个端口(例如 8000),浏览器访问 http://localhost:8000 即可进行页面的开发预览。

假如你的 Jira 站点为 https://jira.example.com ,此时,需要浏览器能直接对 Jira 的 Rest API 服务(https://jira.example.com/rest/api/)发起请求。

1. CORS 合法化配置

当浏览器向与当前页面域名不同的域名发起 API 请求时,会触发 CORS 策略,以确保请求是被目标服务所允许的。

本地开发时的域名是 localhost,API 服务是 example.com,所以会触发 CORS 及其 Preflight Request 策略。

CORS Error

Whistle 提供了 resCors 协议可以很方便的为 response 加上 CORS 相关的 Header(Access-Control-Request-* )。

如下图配置,我们可以设置允许来源 origin 为任意站点(*),允许自定义 Header Authorization 和 Content-Type 的使用:

https://jira.example.com/rest/api resCors://{resCorsTest.json} delete://req.headers.User-Agent

```resCorsTest.json
{
"origin": "*",
"headers": "authorization,content-type",
}
```

同时,我们还使用 delete 协议删除了请求头中的 UA 头信息(req.headers.User-Agent),让 API 服务无法判断出请求的发起方是否为浏览器(注意:Jira Rest API 会针对浏览器开启 XSRF Check)。

2. HTTP Header/Body 的过滤与修改

CORS 合法化配置完成后,浏览器已经可以成功发起跨域 API 请求,但在 console 控制台中,还有上图中的黄色 warning 需要消除。

这个 warning 的原因在于,options 请求的响应头中设置了 X-Content-Type-Options: nosniff,我们可以使用 includeFilter 针对 options HTTP Method,删除掉这个 Header:

https://jira.example.com/rest/api includeFilter://m:options delete://res.headers.X-Content-Type-Options 

如有需要,我们还可以利用 headerReplace 将某个 Header 替换成其他的值,以及使用 resBody 来设置 response 的 body 内容:

https://jira.example.com/rest/api headerReplace://res.Content-Type:/.*/=application/json resBody://({}) 

3. 同域网关

事实上,Whistle 作为代理网关,可以更加方便的绕过 CORS 策略限制。

我们只需为我们的静态页面和 API 服务设置一个相同的自定义域名,然后全部交给 Whistle 即可。

假如这里我们的自定义域名为:http://my.jira.com ,我们只需把对 http://my.jira.com/rest/api 的访问转发到 https://jira.example.com/rest/api 即可:

http://my.jira.com/rest/api https://jira.example.com/rest/api delete://headers.User-Agent
http://my.jira.com 127.0.0.1:8000

(注意:/rest/api 需要配置在前面,确保优先命中)

由于 Rest API 的域名和当前页面设置为同域,所以不会产生 CORS 与 Preflight Request 限制。

在本地开发完成后,我们可以使用 file 协议,直接将自定义域名映射到静态文件目录上。另外,由于需要在 JS 代码中隐藏 Jira HTTP 鉴权的用户名和密码,我们可以通过 auth 协议将这部分信息配置在 Whistle 网关中。以下是完整配置:

http://my.jira.com/rest/api https://jira.example.com/rest/api delete://headers.User-Agent auth://your-username:your-password 
http://my.jira.com file:///path/to/your/project/dist/

同域网关除了以上这种配置外,还有另外一种逆向思路:

将静态页面域名配置成实际的 API 服务域名,借助 xfile 协议,我们可以将未命中的请求全部转发到实际的线上服务,只需以下一行配置:

https://jira.example.com/ xfile:///path/to/your/project/dist/

需要注意的是,以上这种方法需要安装 Whistle CA 证书,用于解析 HTTPS 协议。

怎么样?把 Whistle 作为 API 服务网关,而不需要使用 Node 或 Nginx 服务来转发,是不是既简单又方便?赶紧试试吧:)

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • VS Code,完美的编辑器

    今日凌晨,微软的文本(代码)编辑器 Visual Studio Code(简称 VS Code),发布了首个正式版,距离首个 beta 版上线时间刚好一年。 ...

    猫哥学前班
  • H5 游戏开发 1:Egret 文档有多难用

    最近猫哥开始转行做游戏开发,主要的业务场景是 Hybrid H5 休闲游戏。作为游戏行业的新人,自然少不了一些精彩的技术预研和踩坑经历,今天开始挖个“H5 游戏...

    猫哥学前班
  • 为什么房间的 Wi-Fi 信号这么差

    最近把家里主卧整成了个小影院,由于之前房子装修时网线端口与电源插口布置太少,导致家庭网络架设变得麻烦起来,最后终于通过「无线中继」技术达到了全屋满格 Wi-Fi...

    猫哥学前班
  • WebClient 访问间歇性返回403解决方案

    说明:前段时间做的一个项目莫名的返回403的错误,这种情况也多大是程序员最不喜欢的了,没办法先来分析一下错误信息。之前的代码如下: WebClient webc...

    Java中文社群_老王
  • bash连接mysql数据库

    #!/bin/bash HOST='127.0.0.1' PORT=3306 USERNAME='test' PASSWORD='test' DB='test'...

    苦咖啡
  • 概率论12 矩与矩生成函数

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明。谢谢! 我们重新回到对单随机变量分布的研究。描述...

    Vamei
  • RESTful API基本介绍

    原文链接:https://www.cnblogs.com/derek1184405959/p/8716892.html...

    菲宇
  • SpringBoot核心技术:Actuator自定义节点路径 & 监控服务自定义配置

    路径都是一样的,很容易就会暴露出去,导致信息泄露,发生一些无法估计的事情,如果我们可以自定义节点的映射路径或者自定义监控服务的管理信息,这样就不会轻易的暴露出去...

    恒宇少年
  • RESTful API 设计指南

    简介 REST(英文:Representational State Transfer,简称REST)描述了一个架构样式的网络系统,比如 web 应用程序。它首次...

    zhang_derek
  • Java命令学习系列(三)——Jmap

    jmap是JDK自带的工具软件,主要用于打印指定Java进程(或核心文件、远程调试服务器)的共享对象内存映射或堆内存细节。可以使用jmap生成Heap Dump...

    九州暮云

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动