无法从Cloudflare R2访问JavaScript模块，为何出现CORS错误？

问题场景 #

使用Cloudflare R2为网页index.html提供静态文件，页面引入脚本代码如下：

<script type="module" src="{% static 'js/display.js' %}"></script>
<script type="module" src="{% static 'js/run-model.js' %}"></script>    
<script src="{% static 'js/file.js' %}"></script>

display.js代码：

import { variable1, function1} from "./run-model.js";

run-model.js代码：

import { variable2, function2} from "./display.js";

页面能加载JS文件，但模块导入变量时抛出CORS错误：

Access to script at 'https://<>.r2.cloudflarestorage.com/bucket/js/display.js' from origin 'https://www.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
GET https://<>.r2.cloudflarestorage.com/bucket/js/display.js net::ERR_FAILED 400 (Bad Request)
Access to script at 'https://<>.r2.cloudflarestorage.com/bucket/js/run-model.js' from origin 'https://www.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
GET https://<>.r2.cloudflarestorage.com/bucket/js/run-model.js net::ERR_FAILED 400 (Bad Request)

已尝试操作：

• 在Cloudflare添加规则设置Access-Control-Allow-Origin: *
• 在R2存储桶配置允许https://www.example.com的CORS策略
  但问题依旧：失败请求无Access-Control-Allow-Origin响应头，且Content-Type被设为application/xml

解决步骤 #

1. 修正R2存储桶CORS配置
   模块脚本的CORS预检要求严格，需确保配置包含OPTIONS方法、正确Origin及响应头。示例配置（JSON格式）：

   {
     "CORSRules": [
       {
         "AllowedOrigins": ["https://www.example.com"],
         "AllowedMethods": ["GET", "OPTIONS"],
         "AllowedHeaders": ["*"],
         "ExposeHeaders": ["Content-Type"],
         "MaxAgeSeconds": 3600
       }
     ]
   }
   

   注意：R2的CORS配置优先级高于Cloudflare全局规则，需确保存储桶配置生效。

2. 修复Content-Type错误
   R2可能误判JS文件的MIME类型为application/xml，导致浏览器无法正确解析模块脚本。解决方式二选一：

   • 上传JS文件时手动指定Content-Type: application/javascript
   • 在Cloudflare添加转换规则：
     • 条件：URI路径 匹配 *.js
     • 动作：设置响应头Content-Type为application/javascript

3. 调整Cloudflare规则优先级
   检查是否有其他规则（如缓存、安全规则）覆盖了CORS头配置，确保CORS相关规则优先级最高。

4. 解决循环导入问题
   display.js与run-model.js互相导入属于循环依赖，会导致模块加载异常，甚至触发请求错误。需重构代码：

   • 提取公共变量/函数到独立文件（如common.js）
   • 两个模块均从common.js导入所需内容，避免互相引用

内容的提问来源于stack exchange，提问作者solo dev