hexo 添加接口代理转发功能

时间：

分类：

hexo

字数：

386 字

时长：

大约需要 1 分钟

次数：

0 人阅读

实现功能：阅读次数

需要接口代理原因：本站的阅读次数存于自己服务器，静态的 html 中需要添加请求接口功能。

为什么不使用第三方组件：

  1. 阅读次数功能简单，权当使用 koa + mysql 练手。
  1. 第三方组件说不定啥时候就关停。
  1. 不敢保证第三方服务不作恶。

第三方阅读次数统计功能

不蒜子 统计

有位小伙伴的文章使用的是 LeanCloud 来存储阅读次数。 文章链接

步骤

服务器由于是 nginx，配置代理相对简单。下面说说 hexo server 本地服务如何做接口转发。

根据 webpack 使用习惯，找到了代理中间件 http-proxy-middleware，再看官方的过滤器 server-middleware，貌似可以直接添加中间件，简单尝试一下，貌似成功了，如下：

  1. 新增文件 themes/landscape/scripts/http_proxy_middleware.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const { createProxyMiddleware } = require('http-proxy-middleware');

const apiProxy = createProxyMiddleware('/api', {
  target: 'http://localhost:8001',
  changeOrigin: true,
  pathRewrite: {
    '^/api/': '/', // rewrite path 将链接中的 /api/ 替换为 '/'
  },
});

hexo.extend.filter.register('server_middleware', function(app){
  // 表示以 api 开头的请求将被转发
  app.use('/api', apiProxy);
});

以上配置之后，本地开发环境的 http://localhost:4000/api/pv/get 请求，将被转发至 http://localhost:8001/pv/get

  1. 重启项目即可，出现以下信息表示配置成功
本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2020-03-03/hexo-proxy-api/

如果您觉得文章不错，可以点击文章中的广告支持一下！