WordPress 설치 이후 도메인 연결 이후

Font 관련 파일들이 로딩이 안 되는 문제 발생

찾아보니 CORS 문제로 인한 에러였다

한 자원이 자신이 호스팅되는 출처와 다른 출처의 자원을 요청하게 될 때, cross-origin HTTP 요청이 발생한다. 한가지 예로, http://domain-a.com 에 있는 HTML 문서에서 <img> src 속성으로 http://domain-b.com/image.jpg 요청을 하는 경우를 들 수 있다. 오늘날 많은 웹 페이지들은 CSS 스타일쉬트, 이미지 파일, 스크립트와 같은 자원들을 별도의 출처로부터 읽어온다.

브라우저들은 보안 때문에 스크립트에서 발생시키는 cross-origin HTTP 요청을 제한한다. 그 예로, XMLHttpRequest 는 동일 출처 정책(same-origin policy)을 준수하기 때문에,  XMLHttpRequest 는 동일 출처에만 HTTP 요청을 보낼 수 있었다. 그래서, 웹 개발자들은 더 나은 웹 어플리케이션을 위해 브라우저 제조사들에게 XMLHttpRequest가 cross-domain 요청을 할 수 있도록 요구했다.

W3C Web Applications Working Group 은 이에 새로운 Cross-Origin Resource Sharing (CORS) 모델을 제안한다. CORS를 사용하면, 안전한 cross-domain 데이터 전송이 가능한 cross-domain 접근 제어를 할 수 있다. 현대 브라우저는 CORS를 XMLHttpRequest 같은 API container 에 사용하여 cross-origin HTTP 요청의 위험을 줄이고 있다.

이 문서는 웹 관리자, 서버 개발자, 프론트엔드 개발자들을 위한 글이다. 현대 브라우저는 cross-origin 자원 공유에서 헤더와 정책의 강제 등 클라이언트 요소를 관리한다. 하지만, 이런 새로운 표준을 지원하기 위해 서버 또한 새로운 request와 response의 헤더를 처리해야한다. 서버 개발자들은 서버 측에서 보는 cross-origin 공유 (PHP 코드와 함께 읽는)  를 함께 읽어보는 것도 좋다.

이 cross-origin 공유 표준은 다음과 같은 경우에 cross-site HTTP 요청을 가능케 하기 위해 사용된다.

이 문서는 CORS(Cross-Origin Resource Sharing)의 전반적인 내용과 Firefox 3.5에 구현된 HTTP 헤더 에 관한 내용을 포함한다.

개요Edit

CORS(Cross-Origin Resource Sharing) 표준은 서버가 일련의 도메인들에 대해 웹브라우저를 통해 정보를 읽을 수 있도록 허가하는 HTTP 헤더를 추가해여 문제를 해결한다. 또한, GET 이외의 HTTP 호출, 특히 특정 MIME 형식에 대한 POST 호출 같은 사용자 데이터에 부작용을 일으킬 수 있는 HTTP 요청들을 위해 브라우저의 "비행전"(preflight) 요청이 정의되어 있기도하다. 브라우저가 HTTP OPTIONS 요청을 통해 지원가능한 메서드 목록을 서버로부터 확인을 하고, 서버가 "허가"를 내리면 브라우저가 비로소 실제 HTTP 요청을 수행하는 절차를 수행한다. 서버는 클라이언트가 요청할 때 쿠키나 HTTP Authentication을 통해 "자격증명"(credential)을 해야하는 지도 알려줄 수 있다.


출처 :  https://developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS

 


해결법은 의외로 간단하다.

HTTP 헤더에 해당 옵션을 세팅하면 끝

  $ sudo vi /etc/nginx/sites-available/default  (파일명은 각자에 맞게)

 


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


추가

 



TokenMarket ICO calendar
태그