Cloudflare通过代理服务器绕过 CORS 限制：原理、实现场景解析

原创

已于 2025-01-24 23:24:53 修改 · 2.3k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#前端框架 #安全 #node.js #javascript #代理模式 #proxy模式

于 2025-01-24 23:22:47 首次发布

第一部分：问题背景

在这里插入图片描述

1.1 错误现象复现

// 浏览器控制台报错示例
Access to fetch at 'https://chat.qwenlm.ai/api/v1/files/' from origin 'https://ocr.doublefenzhuan.me' 
has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

1.2 CORS 机制的核心原理

同源策略 (Same-Origin Policy)：浏览器的安全沙箱规则。
预检请求 (Preflight Request)：OPTIONS 方法的作用与触发条件。
服务端责任：Access-Control-Allow-Origin 等响应头的重要性。

1.3 逆向工程场景的特殊性

无服务器控制权：无法修改目标服务器的 CORS 配置。
突发性策略变更：目标服务器可能动态调整安全规则（如案例中的突然限制）。

第二部分：代理方案的技术实现

2.1 整体架构图

[浏览器] --> [同域代理接口 /proxy/upload] --> [目标服务器 chat.qwenlm.ai]

2.2 代码实现详解（以 Cloudflare Worker 为例）

// Worker 路由配置
addEventListener('fetch', event => {
   
   
  const url = new URL(event.request.url);
  switch(url.pathname) {
   
   
    case '/proxy/upload':
      if (event.request.method === 'POST') {
   
   
        return event.respondWith(handleProxyUpload(event.request));
      }
      break;
    // ...