CDN 跨域踩坑实录：360CDN 配置跨域响应头完整步骤

最近在做 H5 页面，静态字体文件放在 CDN 上，页面打开控制台直接报 CORS 跨域错误。一开始打算改 Nginx 源站配置，但源站还要支撑多个项目，改动牵一发而动全身，最后选择直接在 CDN 边缘节点添加跨域头，这里记录完整操作流程和踩坑点。

1、原理简单说

浏览器同源策略会限制 AJAX、字体、图片等资源跨域请求。CDN 跨域的本质：节点返回资源的时候，自动带上Access-Control-Allow-Origin等响应头，浏览器识别头部之后，放行跨域资源请求。

2、360CDN 后台配置步骤

1. 登录 360CDN 控制台，进入对应域名的【HTTP 响应头】功能模块

2. 添加自定义响应头规则，选择匹配条件：可以按文件后缀（.woff、.ttf、.png）或者 URI 目录匹配

3. 添加头部参数：

   Access-Control-Allow-Origin: https://你的业务域名.com
   Access-Control-Allow-Methods: GET,OPTIONS
   Access-Control-Max-Age: 86400

注意：如果写*，代表允许所有域名访问，生产业务不推荐，存在安全隐患。

1. 保存配置，提交生效。配置下发一般几分钟，大流量域名等待时间会稍久。

3、必踩坑清单

1. 配置完没刷新 CDN 缓存：旧缓存资源还保留旧头部，测试一直报错，需要提交缓存刷新任务。
2. OPTIONS 预检请求被 CDN 拦截：部分安全策略会拦截 OPTIONS 请求，记得放行 OPTIONS。
3. 多域名场景：如果需要支持多个业务域名，不要直接写多个 Origin，要用 CDN 的变量匹配功能，否则浏览器会报错。

4、和其他 CDN 简单对比

阿里云、腾讯云 CDN 跨域配置逻辑相近，但部分厂商不支持按路径细分规则，只能全局开启跨域。360CDN 可以针对不同资源设置独立跨域策略，适合业务复杂、安全要求高的站点。

5、验证方法

浏览器 F12 打开 Network 面板，加载资源，查看响应头是否存在配置的 CORS 字段。OPTIONS 预检请求状态码 204 即为正常。

小结：静态资源跨域优先在 CDN 侧处理，不用修改源站代码，上线、回滚都更方便，但是一定要做好域名白名单，不要图省事直接用通配符，避免安全漏洞。