如何处理Web Workers的CORS问题？静态脚本资源跨域报错解决

我在Flask项目中使用Web Worker时，先通过给主页添加Cross-Origin-Embedder-Policy: require-corp和Cross-Origin-Opener-Policy: same-origin解决了SharedArrayBuffer未定义的问题，但随后静态资源machine.js出现net::ERR_BLOCKED_BY_RESPONSE 304错误，原因是静态资源响应没有相关跨域头。

解决思路 #

当页面开启Cross-Origin-Embedder-Policy: require-corp后，所有嵌入的资源（包括Worker脚本）必须满足跨域嵌入规则：要么资源与页面同域且携带Cross-Origin-Resource-Policy头，要么跨域资源携带CORS允许头或Cross-Origin-Resource-Policy: cross-origin。我们需要给静态资源添加对应的响应头。

方法一：全局给静态资源添加头 #

使用Flask的after_request钩子，对所有静态资源路径添加Cross-Origin-Resource-Policy头：

@app.after_request
def add_static_resource_headers(response):
    # 匹配静态资源路径
    if request.path.startswith('/static/'):
        # same-origin 表示仅允许同域页面嵌入，安全性更高
        response.headers['Cross-Origin-Resource-Policy'] = 'same-origin'
    return response

方法二：针对特定静态资源路由添加头 #

如果只需要给machine.js这类特定静态资源加头，可以自定义路由：

from flask import send_from_directory
import os

@app.route('/static/js/mainjs/machine.js')
def serve_machine_worker():
    # 替换为你的静态文件实际目录路径
    static_dir = os.path.join(app.root_path, 'static/js/mainjs')
    resp = send_from_directory(static_dir, 'machine.js')
    resp.headers['Cross-Origin-Resource-Policy'] = 'same-origin'
    return resp

方法三：修改Flask默认静态文件处理逻辑 #

通过继承Flask类，重写send_static_file方法，给所有静态资源统一加头：

from flask import Flask

class CustomFlask(Flask):
    def send_static_file(self, filename):
        response = super().send_static_file(filename)
        response.headers['Cross-Origin-Resource-Policy'] = 'same-origin'
        return response

# 初始化自定义Flask实例
app = CustomFlask(__name__)

额外注意事项 #

• 若遇到304缓存问题，可清空浏览器缓存，或者在Worker脚本URL后添加版本号（如static/js/mainjs/machine.js?v=1）强制浏览器加载最新资源。
• 若你的静态资源来自CDN或跨域地址，需要将Cross-Origin-Resource-Policy设为cross-origin，同时确保资源服务器允许跨域访问。

内容的提问来源于stack exchange，提问作者K.Yazoglu