Access-Control-Allow-Origin 跨域问题

最新推荐文章于 2025-06-19 21:20:32 发布

原创最新推荐文章于 2025-06-19 21:20:32 发布 · 806 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#运维

html5 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种常见的HTML5跨域问题——字体加载失败，并提供了通过配置Nginx服务器来解决字体跨域的具体方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天发现访问了html5页面，报了如下错误：

Font from origin 'http://design.ehaoyao.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://w.ehaoyao.com' is therefore not allowed access.

听设计说是，字体跨域问题，孤陋寡闻第一次碰到，查了一下还真的有这么一回事。

Access-Control-Allow-Origin是HTML5中定义的一种服务器端返回Response header，用来解决资源（比如字体）的跨域权限问题。它定义了该资源允许被哪个域引用，或者被所有域引用（google字体使用*表示字体资源允许被所有域引用）。

解决方法：

<!--在nginx.conf中配置-->
http {
  ......
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Headers X-Requested-With;
  add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
  ......
}

但是有人又说这种安全性不高，不是太懂，参考一下：

http://www.51testing.com/html/96/215196-829360.html

http://ju.outofmemory.cn/entry/63586