Access-Control-Allow-Origin 헤더를 추가하는 방법

웹 사이트 (예 : mywebsite.com)를 디자인하고 있으며이 사이트는 다른 사이트 (예 : anothersite.com)에서 글꼴 글꼴을로드합니다. Firefox에서 글꼴 글꼴로드에 문제가 있었는데이 블로그를 읽었습니다. .

Firefox (v3.5에서 @ font-face 지원)는 기본적으로 도메인 간 글꼴을 허용하지 않습니다. 즉, "Access-Control-Allow-Origin"헤더를 글꼴에 추가 할 수없는 경우 글꼴이 동일한 도메인 (및 하위 도메인)에서 제공되어야합니다.

Access-Control-Allow-Origin 헤더를 글꼴로 설정하려면 어떻게해야합니까?

그래서 당신이하는 일은 ... 글꼴 파일 폴더에 다음과 같은 htaccess 파일을 넣으십시오.

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

또한 원격 CSS 파일에서 font-face 선언에는 글꼴 파일의 전체 절대 URL이 필요합니다 (로컬 CSS 파일에는 필요하지 않음).

예 :

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('http://www.example.com/css/fonts/League_Gothic.eot?') format('eot'),
         url('http://www.example.com/css/fonts/League_Gothic.woff') format('woff'),
         url('http://www.example.com/css/fonts/League_Gothic.ttf') format('truetype'),
         url('http://www.example.com/css/fonts/League_Gothic.svg')

}

그러면 문제가 해결됩니다. 한 가지주의 할 점은 글꼴에 액세스 할 수있는 도메인을 정확히 지정할 수 있다는 것입니다. 위의 htaccess에서 모든 사람이 내 글꼴에 액세스 할 수 있도록 지정 "*"했지만 다음 과 같이 제한 할 수 있습니다.

단일 URL :

헤더 세트 Access-Control-Allow-Origin http://example.com

또는 쉼표로 구분 된 URL 목록

Access-Control-Allow-Origin: http://site1.com,http://site2.com

(현재 구현에서는 여러 값이 지원되지 않습니다.)

공식 문서 에 따르면 브라우저는 사용할 때 그것을 좋아하지 않습니다.

Access-Control-Allow-Origin: "*"

헤더도 사용하는 경우

Access-Control-Allow-Credentials: "true"

헤더. 대신, 그들은 당신이 그들의 기원을 구체적으로 허용하기를 원합니다. 여전히 모든 오리진을 허용하려면 간단한 Apache 마법을 사용하여 작동하도록 할 수 있습니다 ( mod_headers활성화 했는지 확인하십시오 ).

Header set Access-Control-Allow-Origin "%{HTTP_ORIGIN}e" env=HTTP_ORIGIN

Origin모든 교차 도메인 요청에 대해 헤더 를 보내려면 브라우저가 필요 합니다. 문서 Access-Control-Allow-Origin는 요청을 수락 / 수락 할 계획이라면 헤더 에서이 헤더를 다시 에코해야한다고 명시합니다 . 이것이이 Header지시문이하는 일입니다.

불행히도 내 사이트 CSS 파일이 글꼴 CSS 파일을 @import하고 모두 Rackspace Cloud Files CDN에 저장되기 때문에 허용 된 답변이 작동하지 않습니다.

Apache 헤더가 생성되지 않기 때문에 (내 CSS가 Apache에 없기 때문에) 몇 가지 작업을 수행해야했습니다.

1. Cloud Files UI로 이동하여 각 글꼴 멋진 파일에 대한 사용자 지정 헤더 (* 값이있는 Access-Control-Allow-Origin)를 추가합니다.
2. woff 및 ttf 파일의 Content-Type을 각각 font / woff 및 font / ttf로 변경합니다.

두 번째는 약간의 명령 줄 작업이 필요하기 때문에 # 1만으로 벗어날 수 있는지 확인하십시오.

# 1에 사용자 지정 헤더를 추가하려면 :

• 파일에 대한 클라우드 파일 컨테이너보기
• 파일까지 아래로 스크롤
• 톱니 바퀴 아이콘 클릭
• 헤더 편집을 클릭하십시오.
• Access-Control-Allow-Origin을 선택하십시오.
• 단일 문자 '*'를 추가합니다 (따옴표 제외).
• Enter를 누르십시오
• 다른 파일에 대해 반복

계속해서 # 2를 수행해야하는 경우 CURL이있는 명령 줄이 필요합니다.

curl -D - --header "X-Auth-Key: your-auth-key-from-rackspace-cloud-control-panel" --header "X-Auth-User: your-cloud-username" https://auth.api.rackspacecloud.com/v1.0

반환 된 결과에서 X-Auth-Token 및 X-Storage-Url의 값을 추출합니다.

curl -X POST \
  -H "Content-Type: font/woff" \
  --header "X-Auth-Token: returned-x-auth-token" returned-x-storage-url/name-of-your-container/fonts/fontawesome-webfont.woff

curl -X POST \
  -H "Content-Type: font/ttf" \
  --header "X-Auth-Token: returned-x-auth-token" returned-x-storage-url/name-of-your-container/fonts/fontawesome-webfont.ttf

물론이 프로세스는 Rackspace CDN을 사용하는 경우에만 작동합니다. 다른 CDN은 개체 헤더를 편집하고 콘텐츠 유형을 변경하는 유사한 기능을 제공 할 수 있으므로 운이 좋을 수도 있습니다 (여기에 추가 정보 게시).

Java 기반 애플리케이션의 경우 web.xml 파일에 다음을 추가하십시오.

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.ttf</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.otf</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.eot</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.woff</url-pattern>
</servlet-mapping>

이 링크를 확인하십시오. 문제를 확실히 해결할 것입니다 .. 교차 도메인 GET Ajax 호출을 수행하는 많은 솔루션이 있지만 교차 도메인에 대한 POST 요청은 여기에서 해결 됩니다. 그것을 알아내는 데 3 일이 걸렸습니다.

http://blogs.msdn.com/b/carlosfigueira/archive/2012/02/20/implementing-cors-support-in-asp-net-web-apis.aspx

ajax 요청의 file.php에서 값 헤더를 설정할 수 있습니다.

<?php header('Access-Control-Allow-Origin: *'); //for all ?>