Cloudflare Workers

假如现在给你需求，老板认为百度这个网站太垃圾了，全是广告，让你去把百度网站的广告去掉，你会怎么做？

我猜你可能要说，百度的网站源码在百度手里，我怎么改啊，只能通过浏览器安装插件或者手写一个浏览器，使用js注入实现。

真实需求：

framer 官网有很多炫酷的现代化的官网模板，但是要从头开始使用Vue或者React实现一个一模一样的官网是会非常耗费时间和人力的，如果我们只是想简单的修改网站的一些内容，就可以直接上线，请问如何做到？

解决方案：

于是就有了利用 cloudflare workers 代理到 framer 的模板网站，然后动态注入 js 和 css ，动态修改网站内容。以下是一些真实上线的例子。

– 国内代理到ChatGpt

案例：

/**
 * Cloudflare Workers 代理服务
 * 用于将请求代理到目标网站,并注入自定义脚本
 * 
 * @author leyen
 * @date 2025-01-22
 */

// 目标网站域名配置
const TARGET_DOMAIN = 'circuit-dev.framer.website'

// CORS 相关响应头配置
const CORS_HEADERS = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
  'Access-Control-Allow-Headers': '*',
  'Access-Control-Max-Age': '86400'
}

export default {
  /**
   * 处理请求的主函数
   * @param {Request} request - 原始请求对象
   * @param {Object} env - 环境变量
   * @param {Object} ctx - 执行上下文
   * @returns {Response} 响应对象
   */
  async fetch(request, env, ctx) {
    try {
      // 处理 OPTIONS 预检请求
      if (request.method === 'OPTIONS') {
        return new Response(null, { headers: CORS_HEADERS })
      }

      // 构建目标URL
      const url = new URL(request.url)
      const targetUrl = new URL(`https://${TARGET_DOMAIN}${url.pathname}${url.search}`)

      // 设置代理请求头
      const headers = new Headers(request.headers)
      headers.set('Host', TARGET_DOMAIN)
      headers.set('Origin', `https://${TARGET_DOMAIN}`)
      headers.set('Referer', `https://${TARGET_DOMAIN}`)

      // 创建代理请求
      const proxyRequest = new Request(targetUrl, {
        method: request.method,
        headers: headers,
        body: request.body,
        redirect: 'follow'
      })

      // 发送请求到目标服务器
      const response = await fetch(proxyRequest)
      const contentType = response.headers.get('content-type')

      // 处理 HTML 响应,注入自定义脚本
      if (contentType?.includes('text/html')) {
        const html = await response.text()
        const injectedScript = `
          <script>
            // 自定义脚本逻辑
            console.log('注入的脚本已执行', window);
            
            function updateH1() {
              setTimeout(() => {
                document.querySelector('h1').textContent = 'Hello World!'
              }, 3000);
            }
            updateH1();
          </script>
        `
        const modifiedHtml = html.replace('</body>', `${injectedScript}</body>`)
        
        return new Response(modifiedHtml, {
          headers: { ...Object.fromEntries(response.headers), ...CORS_HEADERS },
          status: response.status,
          statusText: response.statusText
        })
      }

      // 处理非 HTML 响应
      return new Response(response.body, {
        headers: { ...Object.fromEntries(response.headers), ...CORS_HEADERS }
      })

    } catch (error) {
      // 错误处理
      console.error('代理请求失败:', error)
      return new Response(`代理请求失败: ${error.message}`, {
        status: 500,
        headers: {
          'Content-Type': 'text/plain;charset=UTF-8',
          ...CORS_HEADERS
        }
      })
    }
  }
}