实战 解决CORS error（跨域资源共享错误）

问题来源

我通过自建cos源cos.xpblog.cn，托管本博客（www.xpblog.cn）的静态文件，引用ttf文件时，出现了CORSerror（跨域资源共享错误）

错误复现

了解CORS

通过了解CORS并解决CORS error。

> 跨源资源共享（CORS） > 跨源资源共享 (CORS)（或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它origin（域，协议和端口），这样浏览器可以访问加载这些资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的"预检"请求。在预检中，浏览器发送的头中标示有HTTP方法和真实请求中会用到的头。 > 跨源HTTP请求的一个例子：运行在 https://domain-a.com 的 JavaScript 代码使用 XMLHttpRequest 来发起一个到 https://domain-b.com/data.json 的请求。 > 出于安全性，浏览器限制脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest 和 Fetch API 遵循同源策略。这意味着使用这些 API 的 Web 应用程序只能从加载应用程序的同一个域请求 HTTP 资源，除非响应报文包含了正确 CORS 响应头。

来自（developer.mozilla.org）

所以，问题就在于。我们没有给另一台服务器的响应头部（header）中添加一些信息，告诉浏览器这些资源文件可以被引用来源站点“安全”的使用，导致浏览器就不会正常加载这些资源了，这样就发生了跨域请求错误。

解决

1️⃣在cdn的http-header（自定义响应header头）添加： <div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

2️⃣在nginx的http中添加如下代码： <div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

总结

记得清除浏览器缓存，否则CORS error 即使你修复了，由于缓存还是显示CORS error