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

博主：小屁
发布时间：2022 年 01 月 27 日
2210 次浏览
7 条评论
1427字数
分类：问题记录

# 问题来源

我通过自建cos源cos.xpblog.cn，托管本博客（www.xpblog.cn）的静态文件，引用ttf文件时，出现了CORSerror（跨域资源共享错误）
![错误复现](https://www.xpblog.cn/usr/uploads/2023/07/1879725117.png)

# 了解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

最后修改：2023 年 07 月 04 日

如果觉得我的文章对你有用，请随意赞赏噢~

🥰猜你想看🥰 HoRain Cloud-新年钜惠 E5-2670v2*2 40核-国内物理服务器，首月低至199元-E5-2689*2 32核 32G内存吐槽一下那些没有需求而来做logo的客户 Let’s Encrypt错误签发数百万张证书所有错误证书将在5天内吊销【折腾】这几天我做了什么（1.21-1.26）为handsome博客添加侧边栏倒计时

🎲随机文章🎲 ''失败背后，全世界都在为我加油''——对3月份月考总结实战解决CORS error（跨域资源共享错误）闰年判断语句 2021.08.24今日遇到大聪明 switch()函数的学习与运用

7 条评论

amnfsfqppg 搜狗浏览器 2.X Windows 10
October 31st, 2024 at 11:59 am

你的文章充满了创意，真是让人惊喜。http://www.ycjas.com

回复
雒 Firefox 117.0 Windows 10
September 7th, 2023 at 08:50 pm

学习一下

回复
5646 Google Chrome 104.0.0.0 Mac OS X Lion 10.15.7
September 8th, 2022 at 10:50 am

565656

回复
躲闪的人士 Google Chrome 100.0.4896.88 Windows 10
May 13th, 2022 at 07:54 pm

来了来了|´・ω・)ノ

回复
88 小米 16.1.27 Android 12
May 2nd, 2022 at 04:09 pm

康康

回复
123 Google Chrome 100.0.4896.75 Windows 10
May 2nd, 2022 at 03:23 pm

看看

回复