当前位置: 首页 > 面试题库 >

CSS-字体被跨域资源共享策略阻止

洪飞扬
2023-03-14
问题内容

当人们开始订购过程时,在我的网站https://www.stubwire.com上,我正在从https://files.stubwire.com加载CSS文件。问题是CSS文件正在尝试加载给出错误的字体。有人可以帮我展示如何解决此问题吗?我已经看到有关使用Amazon S3的修复程序,但这是从我们自己的服务器加载的。

错误

跨域资源共享策略已阻止从源“ https://files.stubwire.com ”加载字体:所请求的资源上不存在“ Access-Control-Allow-Origin”标头。因此,不允许访问来源“

@font-face {
    font-family: 'DroidSansRegular';
    src: url('fonts/DroidSans-webfont.eot');
    src: url('fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/DroidSans-webfont.woff') format('woff'),
         url('fonts/DroidSans-webfont.ttf') format('truetype'),
         url('fonts/DroidSans-webfont.svg#DroidSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

问题答案:

如果控制服务器,则可以调整服务器Apache/Nginx的设置或将Access-Control-Allow-Origin标头添加到HTTP响应的内容。

在您的情况下,您可能想要类似的东西(这将允许您的域访问字体,但阻止其他域使用它,包括您自己的子域):

Access-Control-Allow-Origin: https://www.stubwire.com

Access-Control-Allow-Origin从以下位置获得了标头用法

这是另一个资源,提供了有关如何设置各种服务器(IIS,Nginx,Apache)以添加Access-Control-Allow- Origin标头的示例



 类似资料:
  • 我试图从googleapis导入字体,但由于某些原因,我在所有字体上都出现以下控制台错误: 源https://cdnjs.cloudflare.com的字体已被跨域资源共享策略阻止加载:请求的资源上不存在访问控制允许源标头。因此不允许访问源https://mkhosting.kohlercoding.dk。响应的HTTP状态代码为404。 我在这里看了其他关于这个的帖子,没有任何帮助。这是我的标题

  • 问题内容: Firefox存在一个长期存在的问题,即不加载与当前网页不同来源的字体。通常,在CDN上提供字体时会出现问题。 随着Amazon S3 CORS的推出,是否存在使用CORS解决Firefox中字体加载问题的解决方案? 编辑:非常高兴看到S3 CORS配置的示例。 edit2:我找到了一个可行的解决方案,但实际上并没有理解它的作用。如果任何人都可以提供有关配置的更详细的解释以及亚马逊解释

  • 编辑2:我已经找到了一个可行的解决方案,但没有真正理解它的作用。如果有人能提供关于配置的更详细的解释,以及在亚马逊对配置的解释中所发生的背景魔法,那将是非常感谢的,就像nzifnab提供的赏金一样。

  • 问题内容: 我正在编写一个HTML5应用程序,该应用程序使用JSONP从几个不同的来源收集数据。我对GET所做的任何事情都可以正常工作。我现在正尝试发布数据,并且遇到了一个有趣的问题。我需要将数据从我的应用程序发布到另一个应用程序,该应用程序从本地计算机运行。我正在尝试编写具有跨平台功能的移动应用程序(请考虑使用Pulse / Flipboard),因此该代码将始终从本地源运行。我的思考过程如下:

  • 跨域资源共享 (CORS) 跨域资源共享(Cross-Origin Resource Sharing)允许WEB端的应用程序访问不属于本域的资源 配置格式 CORS配置为json字符串,类似 { "rules":[ { "id":"id1" "AllowOrigin":"http://*.example.com" //指定允许发送跨源请求的源,支持使用通配符

  • 问题内容: 这是我的代码: 这适用于GET请求而不是POST! 我将Apache用作服务器,并使用以下命令对其进行了配置: 在我的angularjs中,我包含在模块应用程序的配置中: 但是请求POST仍然无法正常工作! 我希望有人能提出任何想法。 问题答案: 在服务器端添加这些标头: 如果仍然无法正常工作,请发布浏览器正在发送的预检请求的详细信息。 为什么要这样做? 如果不是简单的请求(例如,表单