在做网页开发时，经常会遇到一个页面加载不出来某个资源的问题，比如从一个域名请求另一个域名的图片、接口数据或者字体文件。这时候浏览器控制台可能会报错：‘No 'Access-Control-Allow-Origin' header is present’。这背后其实就是跨域资源共享（CORS）在起作用。
什么是跨域资源共享
跨域不是前端代码写错了，而是浏览器出于安全考虑实施的一种策略——同源策略。只有当协议、域名、端口完全一致时，才允许直接访问资源。比如你的页面是 https://a.com，而请求的是 https://b.com/api/data，即使都是 HTTPS，也属于跨域。
CORS 就是为了解决这个问题设计的一套机制。服务器可以通过设置响应头，明确告诉浏览器：“我允许这个来源的请求”。关键的响应头就是 Access-Control-Allow-Origin，它可以指定具体的域名或使用通配符 *。
常见跨域场景示例
假设你在本地开发一个 HTML 页面，路径是 file:///Users/you/project/index.html，页面里用 JavaScript 去请求 https://api.example.com/users。虽然只是读个数据，但浏览器会拦截这个请求，因为本地文件没有“源”的概念，被视为不安全操作。
解决办法之一是在服务端加上：
Access-Control-Allow-Origin: *或者更安全地指定：
Access-Control-Allow-Origin: https://your-site.comHTML 渲染过程中的跨域影响
很多人以为 CORS 只影响 AJAX 请求，其实不然。像 <img>、<script>、<link> 这些标签本身就支持一定程度的跨域加载，比如引用 CDN 上的 jQuery 或 Google Fonts 的字体。
但这里有个细节：虽然能加载，但如果资源本身需要获取完整信息（比如用 JavaScript 读取图片像素），仍然受 CORS 限制。例如你用 Canvas 绘制一张来自其他域名的图片后尝试调用 toDataURL()，浏览器就会报错，除非该图片服务器返回了正确的 CORS 头。
字体文件的坑
自定义字体是个典型例子。你在 CSS 中这样写：
@font-face {
font-family: 'CustomFont';
src: url('https://cdn.example.com/fonts/custom.woff2') format('woff2');
}如果 cdn.example.com 没有配置 Access-Control-Allow-Origin，字体就不会显示，Chrome 控制台会提示 CORS 错误。这时候不能怪浏览器太严格，而是为了防止恶意站点窃取敏感资源。
如何绕开或正确处理跨域
开发阶段最简单的办法是启动一个本地服务器，而不是直接双击打开 HTML 文件。比如用 Python 起一个服务：
python -m http.server 8000这样地址变成 http://localhost:8000，就具备了完整的源信息，配合代理或后端放开 CORS 更容易调试。
生产环境建议通过反向代理解决。比如用 Nginx 把 API 请求代理到目标服务，对外暴露同一个域名，从根本上避免跨域问题。
JSONP 曾经的 workaround
早年没有 CORS 的时候，开发者利用 <script> 标签不受跨域限制的特点，把数据包裹在函数调用中返回，这就是 JSONP。但现在基本被淘汰了，只支持 GET 请求，且存在安全风险。
现代浏览器还支持 crossorigin 属性，用于控制资源请求是否携带凭据。比如：
<img src="https://other.com/avatar.jpg" crossorigin="anonymous">加上这个属性后，浏览器会以 CORS 方式请求图片，确保后续能在 Canvas 中安全使用。
实际项目中的建议
如果你维护的是公开 API，建议根据调用方合理配置 Access-Control-Allow-Origin，不要盲目设为 *，尤其当接口涉及用户登录状态时。可以结合 Access-Control-Allow-Credentials 控制是否允许携带 Cookie。
前端团队和后端团队最好在项目初期就对跨域策略达成一致，避免上线前才发现静态资源加载失败。有时候一个图标不显示，追查半天发现只是 CDN 缺少一个响应头。