Question

我正在尝试使用Discourse作为博客软件来将subdomain.com代理到domain.com/blog。

我有以下代码：

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)); 
}

它可以工作，但是页面无法正常工作，因为所有镶边都显示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错误。

如何解决此问题，或者如果我对问题的来源有误，请完成所需的工作？

Answer 1

更简单的方法是使用HTMLRewriter。在此处查看文档：{{3}}

例如：

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。

修改与cloudflare工作者的链接href

1 个答案: