前提：

​ 由于cloudflare下部署的worker缺了很多请求头导致我博客文章链接被限制读不出来，图片在新标签下也只能下载而不能在线查看。

方法一：通过配置cloudflare的worker，并且设置worker路由到所需要的链接，worker配置的js如下，Content-Disposition可以自行修改。

Cloudflare Worker 可以用来设置跨域资源共享 (CORS) 的配置，从而解决 CORS 的问题。通过 Workers，创建一个反向代理，在响应中添加 Access-Control-Allow-Origin 等 CORS 头。

Worker 路由 是 Cloudflare 提供的一种机制，用于定义哪些请求会触发 Cloudflare Worker 脚本。通过设置路由，你可以选择性地将某些 URL 请求交由 Worker 脚本处理，而其他请求则按正常路径直接由服务器处理。

部署步骤

  1. 登录 Cloudflare Dashboard。
  2. 进入 Workers & Pages，然后创建一个新的 Worker。
  3. 将上面的脚本粘贴到 Worker 的编辑器中。
  4. 保存并部署 Worker。
  5. 配置 Worker 路由，例如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const url = new URL(request.url);

  // 将请求转发到目标 URL
  const targetUrl = `https://shortlink.3865472.xyz${url.pathname}`;

  const response = await fetch(targetUrl, {
    method: request.method,
    headers: request.headers,
    body: request.method !== 'GET' ? request.body : null
  });

  // 克隆响应并添加 CORS 头
  const newHeaders = new Headers(response.headers);
  newHeaders.set('Access-Control-Allow-Origin', '*');
  newHeaders.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  newHeaders.set('Access-Control-Allow-Headers', 'Content-Type');
  
  // 设置 Content-Disposition 为 inline，以便浏览器渲染图片
  newHeaders.set('Content-Disposition', 'inline');

  return new Response(response.body, {
    status: response.status,
    statusText: response.statusText,
    headers: newHeaders
  });
}

方法二：配置转换规则

在域名左侧选择规则->转换规则

img

选择修改响应头

img

具体配置如下图所示：

img

响应匹配建议选择：主机名-包含-（输入你的域名）

修改响应头：可根据你的实际情况，没有就选择添加，想修改就选择设置静态。等等

image-20241213012435337

方法二改进（最终方案）

在方法二的基础上，因为要动态修改content-type，根据url后缀识别，所以把部分(上图没有，是’Content-Disposition’= ‘inline’)转到了worker上进行路由，所以可以说是方法一＋方法二的合成版：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const url = new URL(request.url)
  const fileExtension = url.pathname.split('.').pop().toLowerCase()

  // 获取原始响应
  const response = await fetch(request)

  // 创建新的响应，保留原始 Content-Type
  const modifiedResponse = new Response(response.body, response)

  // 根据文件扩展名设置 Content-Type（如果是已知图像类型）
  let contentType = response.headers.get('Content-Type')
  if (fileExtension === 'jpg' || fileExtension === 'jpeg') {
      contentType = 'image/jpeg'
  } else if (fileExtension === 'png') {
      contentType = 'image/png'
  } else if (fileExtension === 'webp') {
      contentType = 'image/webp'
  }

  // 修改 Content-Type 和 Content-Disposition
  modifiedResponse.headers.set('Content-Type', contentType)
  modifiedResponse.headers.set('Content-Disposition', 'inline')

  return modifiedResponse
}

image-20241213024302900

image-20241213024322470