基于github托管图片 - Flygeonの小站

TIP
请不要过度滥用这个项目，仅提供思路。

之前就在想解决图床的问题，使用第三方图床的话会有失效的风险，毕竟不是存储在自己的服务器上，那么有没有什么解决办法呢？

兄弟有的有的，经过我的探索，我发现完全可以将图片直接放到github仓库上，白嫖GitHub。

本站使用的是基于Astro的博客，项目本身就是托管在gh上的，所以我在项目的根目录下创建了一个image文件夹，用来存放图片。

这样push后就将图片一并传到gh上了，在自己的仓库中可以找到图片的直链地址，例如我的某张图片的url就是https://raw.githubusercontent.com/Flygeon/Astro/refs/heads/main/image/6-cover.png。

反代图片#

但是这个方法有个很大的问题，由于天朝网络的因素，国内访问就和窜西一样时好时坏，所以我们还需要构建一个反代项目来解决这个问题。这点可以通过大善人Cloudflare来实现。

新建一个Cloudflare Pages项目就够了，不需要挤占Workers资源。新建一个_worker.js文件，往里面填充如下代码：

1
// _worker.js - 完整的 raw.githubusercontent.com 反向代理
2
// 部署到 Cloudflare Pages 即可使用
3

4
// 配置区域（可根据需要修改）
5
const TARGET_HOST = "raw.githubusercontent.com";      // 目标主机
6
const ENABLE_CORS = true;                             // 是否启用跨域资源共享
7
const ENABLE_CACHE = true;                            // 是否启用缓存（默认缓存 1 天）
8
const CACHE_TTL = 86400;                              // 缓存时间（秒），默认 1 天
9
const ALLOWED_REFERERS = [];                          // 防盗链白名单，留空则不检查，例如 ["https://yourdomain.com"]
10

11
export default {
12
  async fetch(request, env, ctx) {
13
    try {
14
      // 1. 防盗链检查（可选）
15
      if (ALLOWED_REFERERS.length > 0) {
16
        const referer = request.headers.get("Referer");
17
        if (referer) {
18
          let isAllowed = false;
19
          for (const allowed of ALLOWED_REFERERS) {
20
            if (referer.startsWith(allowed)) {
21
              isAllowed = true;
22
              break;
23
            }
24
          }
25
          if (!isAllowed) {
26
            return new Response("Forbidden", { status: 403 });
27
          }
28
        }
29
      }
30

31
      // 2. 构建目标 URL
32
      let url = new URL(request.url);
33
      url.protocol = "https";
34
      url.hostname = TARGET_HOST;
35
      // 保持原始路径、查询参数不变
36

37
      // 3. 创建新的请求，复制原始请求的方法、头、正文
38
      let newRequest = new Request(url, {
39
        method: request.method,
40
        headers: request.headers,
41
        body: request.body,
42
        // 保留请求的 duplex 属性（用于流式传输）
43
        duplex: "half"
44
      });
45

46
      // 4. 发送请求到 GitHub raw 服务器
47
      let response = await fetch(newRequest);
48

49
      // 5. 准备响应头（复制原始响应头并修改）
50
      let responseHeaders = new Headers(response.headers);
51

52
      // 6. 启用 CORS（跨域资源共享）
53
      if (ENABLE_CORS) {
54
        responseHeaders.set("Access-Control-Allow-Origin", "*");
55
        responseHeaders.set("Access-Control-Allow-Methods", "GET, HEAD, OPTIONS");
56
        responseHeaders.set("Access-Control-Allow-Headers", "Content-Type");
57
        // 处理预检请求（OPTIONS）
58
        if (request.method === "OPTIONS") {
59
          return new Response(null, {
60
            status: 204,
61
            headers: responseHeaders
62
          });
63
        }
64
      }
65

66
      // 7. 启用缓存（通过 Cache-Control 头）
67
      if (ENABLE_CACHE && response.status === 200) {
68
        // 如果原始响应没有 Cache-Control，则添加
69
        if (!responseHeaders.has("Cache-Control")) {
70
          responseHeaders.set("Cache-Control", `public, max-age=${CACHE_TTL}`);
71
        }
72
      }
73

74
      // 8. 可选：隐藏代理标识（假装自己是原始服务器）
75
      responseHeaders.set("Via", "");               // 移除 Via 头
76
      responseHeaders.delete("CF-Cache-Status");    // 移除 Cloudflare 特有头
77

78
      // 9. 返回最终响应
79
      return new Response(response.body, {
80
        status: response.status,
81
        statusText: response.statusText,
82
        headers: responseHeaders
83
      });
84

85
    } catch (error) {
86
      // 错误处理：返回 500 错误信息
87
      return new Response(`Proxy Error: ${error.message}`, { status: 500 });
88
    }
89
  }
90
};

然后自定义你的域名，测试一下访问，All done.