时间戳

首页 > 解决方案 > 使用 cloudflare 工作人员修改链接 href

cloudflare-workers - 使用 cloudflare 工作人员修改链接 href

问题描述

我正在尝试将 subdomain.com 代理到 domain.com/blog，而 Discourse 是博客的软件。

我有以下代码：

addEventListener('fetch', event => {
  var url = new URL(event.request.url);
  if (url.pathname.startsWith('/blog/') || url.pathname === '/blog') {
    handleBlog(event, url);
  } else {
    event.respondWith(fetch(event.request));
  }
})

async function handleBlog(event, url) {
  var originUrl = url.toString().replace(
    'https://example.com/blog',
   'https://subdomain.com');
  event.respondWith(fetch(originUrl)); 
}

它可以工作，但是页面不起作用，因为所有 chrome 都会给出 404 错误，我这是由这些代码行（示例）引起的：

<link rel="preload" href="/assets/browser-update-1741a2ed67a367faeb0a582af064457e8b1b1354e52e6efcf8bf26301166dec8.js" as="script">

<link href="/stylesheets/discourse-solved_2_d335db0449b9d3e518e949a991fe12b7c0af6ba3.css" media="all" rel="stylesheet" data-target="discourse-solved" data-theme-id="3" />

我相信 Chrome 正在尝试使用亲属路径加载资产，因此它使用根域，该域没有要加载的资产，因此返回 404 错误。

我该如何解决这个问题，或者如果我对问题的根源有误，完成我想要的？

标签： cloudflare-workers

解决方案

更简单的方法是使用 HTMLRewriter。在此处查看文档：https ://developers.cloudflare.com/workers/reference/apis/html-rewriter/

例如：

class ElementHandler {
  element(element) {
    // An incoming element, such as `div`
    console.log(`Incoming element: ${element.tagName}`)
  }

  comments(comment) {
    // An incoming comment
  }

  text(text) {
    // An incoming piece of text
  }
}

async function handleRequest(req) {
  const res = await fetch(req)

  return new HTMLRewriter().on('div', new ElementHandler()).transform(res)
}

因此，在您的情况下，您需要创建一个新的 Rewriter 实例并监视a元素事件。调用setAttribute该元素以修改其href.

推荐阅读