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

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>

---

Check this link.. It will definitely solve your problem.. There are plenty of solutions to make cross domain GET Ajax calls BUT POST REQUEST FOR CROSS DOMAIN IS SOLVED HERE. It took me 3 days to figure it out.

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

---

In your file.php of request ajax, can set value header.

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

참고URL : https://stackoverflow.com/questions/5008944/how-to-add-an-access-control-allow-origin-header