hexo 添加接口代理转发功能

实现功能:阅读次数

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

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

  1. 阅读次数功能简单,权当使用 koa + mysql 练手。

  2. 第三方组件说不定啥时候就关停。

  3. 不敢保证第三方服务不作恶。

第三方阅读次数统计功能

不蒜子 统计

有位小伙伴的文章使用的是 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

  2. 重启项目即可,出现以下信息表示配置成功

本文由 linx(544819896@qq.com) 创作,采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用,但需署名作者且注明文章出处。本文链接为: https://blog.jijian.link/2020-03-03/hexo-proxy-api/

如果您觉得文章不错,可以请我喝一杯咖啡!