新项目架构使用动静分离部署方式进行部署，静态资源存放至 OSS 对象存储中，对接 CDN 进行内容分发，绑定静态资源的域名进行引入使用。
起因
动静分离后，静态资源（CSS、JS、字体、图片）放置在 OSS 对象存储中，对接 CDN 服务。在用户第一次访问时，CDN会检查到数据没有缓存，回源到源站进行访问。源站对比将数据经过 CDN 反馈给客户端浏览器。浏览器比对 Access-Control-Allow-Origin 后，允许正确，所以跨域正常。当第二个用户访问时，CDN 检测有这个文件，所以会直接给客户端反馈缓存页面。由于 CDN 未配置跨域的请求头，造成客户端浏览器判断失败，不允许访问，所以出现了跨域失败。
状况
使用中的前端页面地址为 https://www.domain.com/hx/mall/index.html
引用的静态文件资源地址为 https://static-ft.domain.com/hx/font/front.woff
小贴士：静态资源的域名和主页的域名不一致导致存在跨域问题。
解决
阿里云 CDN 服务为用户提供了配置 HTTP 请求头的方式，让用户可以快速解决跨域问题。
进入控制台，切换到 CDN 产品中，找到需要添加请求头的 CDN 实例，点击右侧的管理。
点击左侧“缓存设置”，选择“HTTP响应头”标签，点击添加即可。
阿里云提供了以下参数来解决跨域问题。
| 参数 | 取值 |
|---|---|
| Access-Control-Allow-Origin | * |
| Access-Control-Allow-Methods | POST/GET/HEAD/PUT/DELETE |
| Access-Control-Max-Age | 3600 |
添加需要配置跨域的域名即可，实际上可以使用 * 来全部允许，但是不推荐这样进行使用。
小贴士：需要注意的是Access-Control-Allow-Origin若不使用*使用域名的情况下，不支持域名中使用通配符（比如不支持 *.domain.com 之类的值）并且使用域名的情况下必须指定协议及端口（若未修改端口的情况下）。
如图所示：添加的跨域 origin 为 https://www.domain.com 即可，稍等片刻访问尝试后，可见其状态变更为“正常”。
附录
参考链接
本文由 柒 创作，采用 知识共享署名4.0
国际许可协议进行许可。
转载本站文章前请注明出处，文章作者保留所有权限。
最后编辑时间： 2023-12-16 14:00 PM