원본 간 글꼴이 Cross-Origin Resource Sharing 정책에 의해로드되지 않도록 차단되었습니다

두 Chrome 브라우저에서 다음과 같은 오류가 발생하지만 전부는 아닙니다. 현재 문제가 무엇인지 확실하지 않습니다.

출처 ' https://ABCDEFG.cloudfront.net '의 글꼴 이 Cross-Origin 리소스 공유 정책에 의해로드되지 않도록 차단되었습니다. 요청 된 리소스에 'Access-Control-Allow-Origin'헤더가 없습니다. 따라서 원본 ' https://sub.domain.com '은 액세스 할 수 없습니다.

S3에 다음 CORS 구성이 있습니다

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedHeader>*</AllowedHeader>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

요청

Remote Address:1.2.3.4:443
Request URL:https://abcdefg.cloudfront.net/folder/path/icons-f10eba064933db447695cf85b06f7df3.woff
Request Method:GET
Status Code:200 OK
Request Headers
Accept:*/*
Accept-Encoding:gzip,deflate
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Host:abcdefg.cloudfront.net
Origin:https://sub.domain.com
Pragma:no-cache
Referer:https://abcdefg.cloudfront.net/folder/path/icons-e283e9c896b17f5fb5717f7c9f6b05eb.css
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.94 Safari/537.36

JS 파일을 포함하여 Cloudfront / S3의 다른 모든 요청은 올바르게 작동합니다.

이 규칙을 .htaccess에 추가하십시오.

Header add Access-Control-Allow-Origin "*" 

@david thomas가 제안한 것처럼 특정 도메인 값을 사용할 수 있습니다.

Header add Access-Control-Allow-Origin "your-domain.com"

~ Sep / Oct 2014 이후의 Chrome은 Firefox에서 https://code.google.com/p/chromium/issues/detail?id=286681 과 동일한 CORS 검사를 적용합니다 . https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzw 에 이에 대한 토론이 있습니다.

폰트에 대해 브라우저가 프리 플라이트 검사를 수행 할 수 있다고 가정하면 S3 정책 에는 cors 요청 헤더도 필요합니다. . Safari (현재 CORS에서 글꼴을 확인하지 않음)와 Firefox (그렇지 않음)에서 페이지를 확인 하여이 문제를 다시 확인할 수 있습니다.

Amazon S3 CORS 세부 정보 는 Amazon S3 CORS (Cross-Origin Resource Sharing)의 스택 오버 플로우 응답 및 Firefox 도메인 간 글꼴로드 를 참조하십시오.

일반적으로 NB는 Firefox에만 적용되므로 Chrome이 아닌 Firefox를 검색하는 데 도움이 될 수 있습니다.

<AllowedMethod>HEAD</AllowedMethod>S3 버킷의 CORS 정책 에 간단히 추가하여 문제를 해결할 수있었습니다 .

예:

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

Nginx :

location ~* \.(eot|ttf|woff)$ {
   add_header Access-Control-Allow-Origin '*';
}

AWS S3 :

1. 버킷을 선택하십시오
2. 오른쪽 상단의 속성을 클릭하십시오
3. Permisions => 편집 Cors 구성 => 저장
4. 저장

http://schock.net/articles/2013/07/03/hosting-web-fonts-on-a-cdn-youre-going-to-need-some-cors/

2014 년 6 월 26 일 AWS는 CloudFront에서 적절한 Vary : Origin 동작을 발표했습니다.

S3 버킷에 대한 CORS 구성을 설정하십시오.

<AllowedOrigin>*</AllowedOrigin>

CloudFront-> 배포->이 오리진의 동작에서 전달 헤더 : 화이트리스트 옵션을 사용하고 'Origin'헤더를 화이트리스트에 추가하십시오.

CloudFront가 새 규칙을 전파하는 동안 ~ 20 분 동안 기다립니다.

이제 CloudFront 배포는 서로 다른 클라이언트 오리진 헤더에 대해 서로 다른 응답 (적절한 CORS 헤더 포함)을 캐시해야합니다.

나를 위해 일한 유일한 것 (아마도 www. 사용법과 일치하지 않기 때문에) :

이것을 .htaccess 파일에 붙여 넣으십시오.

<IfModule mod_headers.c>
<FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
<IfModule mod_mime.c>
# Web fonts
AddType application/font-woff woff
AddType application/vnd.ms-fontobject eot

# Browsers usually ignore the font MIME types and sniff the content,
# however, Chrome shows a warning if other MIME types are used for the
# following fonts.
AddType application/x-font-ttf ttc ttf
AddType font/opentype otf

# Make SVGZ fonts work on iPad:
# https://twitter.com/FontSquirrel/status/14855840545
AddType     image/svg+xml svg svgz
AddEncoding gzip svgz

</IfModule>

# rewrite www.example.com → example.com

<IfModule mod_rewrite.c>
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
</IfModule>

http://ce3wiki.theturninggate.net/doku.php?id=cross-domain_issues_broken_web_fonts

나는이 같은 문제가 있었고이 링크는 나에게 해결책을 제공했다.

http://www.holovaty.com/writing/cors-ie-cloudfront/

짧은 버전은 다음과 같습니다.

1. S3 CORS 구성 편집 (내 코드 샘플이 제대로 표시되지 않음)
   참고 : 이것은 원래 질문에서 이미 수행되었습니다.
   참고 : 제공된 코드는 매우 안전하지 않으며 링크 된 페이지에서 자세한 정보를 제공합니다.
2. 배포판의 "비헤이비어"탭으로 이동하여 클릭하여 편집하십시오.
3. "앞으로 헤더"를 "없음 (캐싱 개선)"에서 "화이트리스트"로 변경하십시오.
4. "화이트리스트 헤더"목록에 "원본"추가
5. 변경 사항을 저장하십시오

클라우드 프론트 배포가 업데이트되며 약 10 분이 걸립니다. 그 후 CORS 관련 오류 메시지가 브라우저에서 사라 졌는지 확인하여 모든 것이 잘되어야합니다.

web.config 파일과 함께 Microsoft 제품을 사용하는 경우 :

이것을 web.config와 병합하십시오.

모든 도메인에 허용하려면 교체 value="domain"와 함께value="*"

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.webserver>
    <httpprotocol>
      <customheaders>
        <add name="Access-Control-Allow-Origin" value="domain" />
      </customheaders>
    </httpprotocol>
  </system.webserver>
</configuration>

web.config를 편집 할 권한이 없으면 서버 측 코드에이 줄을 추가하십시오.

Response.AppendHeader("Access-Control-Allow-Origin", "domain");

여기에 좋은 글이 있습니다 .

nginx / apache에서 이것을 구성하는 것은 실수입니다.
호스팅 회사를 사용하는 경우 에지를 구성 할 수 없습니다.
Docker를 사용하는 경우 앱은 독립적이어야합니다.

일부 예제는 사용 connectHandlers하지만 문서에 헤더 만 설정합니다. 사용은 제공 rawConnectHandlers되는 모든 자산 (fonts / css / etc)에 적용됩니다.

  // HSTS only the document - don't function over http.  
  // Make sure you want this as it won't go away for 30 days.
  WebApp.connectHandlers.use(function(req, res, next) {
    res.setHeader('Strict-Transport-Security', 'max-age=2592000; includeSubDomains'); // 2592000s / 30 days
    next();
  });

  // CORS all assets served (fonts/etc)
  WebApp.rawConnectHandlers.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    return next();
  });

프레이밍 등과 같은 브라우저 정책 을 살펴보기에 좋은시기입니다 .

node.js를 서버로 사용하는 경우 원점을 추가하십시오 ...

이처럼

  app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

원점에 대한 응답이 필요합니다

heroku에 대한 작업 솔루션은 http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html입니다 (따옴표는 다음과 같습니다).

아래는 Heroku에서 Rails 앱을 실행하고 Cloudfront를 CDN으로 사용하는 경우 수행 할 수있는 작업입니다. Ruby 2.1 + Rails 4, Heroku Cedar 스택에서 테스트되었습니다.

글꼴 자산에 CORS HTTP 헤더 (Access-Control- *) 추가

• font_assetsGemfile에 gem 을 추가하십시오 .
• bundle install
• 추가 config.font_assets.origin = '*'로config/application.rb . 보다 세밀한 제어를 원하면 다른 환경에 다른 원점 값을 추가 할 수 있습니다 (예 :config/config/environments/production.rb
• curl -I http://localhost:3000/assets/your-custom-font.ttf
• 코드를 Heroku로 푸시하십시오.

CORS HTTP 헤더를 전달하도록 Cloudfront 구성

Cloudfront의 배포판을 선택하고 "동작"탭에서 글꼴 전송을 제어하는 ​​항목을 선택하고 편집하십시오 (대부분의 간단한 Rails 앱의 경우 여기에 1 개의 항목 만 있음). 정방향 헤더 를 "없음"에서 "필자"로 변경하십시오 . 허용 목록에 다음 헤더를 추가하십시오.

Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Max-Age

저장하면 끝입니다!

주의 사항 : CORS 오류가 없어도 Firefox에서 글꼴을 새로 고치지 않는 경우가 있습니다. 이 경우 Firefox가 실제로 결정되었다고 확신하도록 페이지를 몇 번 새로 고침하십시오.