字体 url 上的“请求的资源上不存在‘Access-Control-Allow-Origin’标头”。 CloudFront 与 Lightsail Wordpress

Question

在 W3Total Cache 的帮助下，我正在我的网站https://topshelfaquatics.com上的 Lightsail 上使用 cloudfront。 我已经使用了所有可能的方法，比如在 Cloudfront 中允许标头 (Origin)，但仍然没有解决。 你能给我建议一个解决方案吗？

Answer 1

请查看开发人员工具中的网络选项卡。 这将为您提供有关 http 调用的信息。 大多数情况下，当它是 xhr (ajax) 调用并且响应中没有设置 Access-Control-* 标头时，浏览器会给出此错误。 为了解决这个问题，有两种可能：

1. 不要使用 xhr 请求字体，所以不要从 JS 加载字体。 使用 html/css 中的默认方法来加载字体。

2. 将所需的 Access-Control-* 标头添加到 http 响应中。 这需要 cloudfont.net 的参与，因此该解决方案可能不太现实。

Answer 2

跨源资源共享 - CORS - 是一种机制，它使用一些额外的 HTTP 标头来通知浏览器访问资源与源具有不同的域。

您尝试在 Cloud Front 访问资源，而无需设置允许的域 int，下面是 Cloud Front 中为 HTTP 方法 GET 和所有标头启用 CORS 的示例：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>https://topshelfaquatics.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>1800</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

Answer 3

跨域资源共享 (CORS) 是一种机制，允许从提供第一个资源的域之外的另一个域请求网页上的受限资源。 ... 默认情况下，同源安全策略禁止某些“跨域”请求，尤其是 Ajax 请求。

Answer 4

Chrome 浏览器安装扩展：

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en