서버 세팅 : 타 서버에서 내 서버 이미지 엑박 문제 - No 'Access-Control-Allow-Origin 문제 해결

웹페이지를 구성하다 보면 A 사이트에서 B 사이트의 이미지를 링크할 때 IE(인터넷 익스플로어)에서는 엑박이 뜨거나 크롬브라우저에서는 이미지가 아예 보이지 않는 경우가 있습니다.

해당 URL의 대소문자가 틀린 경우 간혹 그런 경우가 있지만, 그렇지 않은 데도 이미지가 뜨지 않을 경우가 있는데요.

단순 이미지 링크인 경우는 그다지 발생하지는 않지만
자바스크립트로 다른 사이트의 이미지 자원을 불러올 경우 그럴 경우가 있습니다.

그 원인은 "교차 출처 리소스 공유"(Cross Origin Resource Sharing)라는 기술 때문인데요.

딱히 문제가 있어서 안 뜨는게 아니라 해당 서버에서 "일부러" 막아놓은 경우입니다.
이 기능이 적용되면 다른 사이트에서 내 서버의 이미지를 무작위로 가져다 쓰는걸 막을 수 있는 장점이 있기도 합니다.
언제부터 적용되었는지는 알 수가 없으나 크레이 웹서버에서도 관련 기술이 적용된 걸 모르고 있었는데요.

자바스크립트 예제 소스를 다른 서버에서 실행하면 일부 소스에서 이미지가 뜨지 않는 오류가 발생한 적이 있었습니다.
현재는 해결한 상태인데요. 에러 당시 F12 키 ( 개발자도구 ) 를 누른다음, Console 탭을 선택하면 아래와 같은 오류 메시지를 확인할 수 있습니다.

CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
교차출처 리소스 공유 정책 : 요청된 리소스의 '접근제어허가기준'에 대한 헤더가 현재 없습니다. 라는 의미인데요.

쉬운 예로 다른 서버에서 이미지를 요청했다면 허가한 적이 없으니 보여줄 수 없다~ 라는 것입니다.

내 서버의 이미지를 다른 서버에서 사용하게 하려면 어떻게 해야 할까요?
관련 부분을 해제하는 방법을 알아내어 공유합니다.

※ 이 내용은 다른 서버의 이미지 엑박 뜨는걸 해결하는 방법은 아닙니다.
다만 내 서버의 이미지가 엑박 뜰 경우 해결방법에 대한 내용이니 관련 부분 착오 없으시기 바랍니다.

이 내용은 실제 리눅스 서버에 접속하여
웹서버를 재시작할 수 있는 지식 정도는 기본으로 알고 계신 것을 전제로 합니다.

크레이의 개인용 웹서버는 리눅스 호스팅 서버이니 리눅스로 설명드리겠습니다.

1. 먼저 리눅스 서버에 아이디와 패스워드를 타이핑하여 접속합니다. 

2. 아파치 환경설정 파일의 위치를 탐색합니다.

find / -name httpd.conf

3. vi 편집기 ( 다른 에디터도 상관은 없습니다. ) 로 탐색된 환경설정 파일을 엽니다.

vi 찾은경로의httpd.conf 파일

4. DocumentRoot 를 찾습니다.
vi 편집기에서는 슬래시키(/)를 치고 DocumentRoot 를 타이핑한 다음 Enter 키를 치면 탐색합니다.
동일한 내용을 연속 탐색할 때는 슬래시(/) 키만 입력 Enter 키를 치면 다음 내용을 탐색합니다.

5. DocumentRoot 아랫줄에 다음 내용을 삽입합니다.
이 설정은 모든 사이트에서 내 서버에 접근할 때 리소스에 대한 접근을 허용해주겠다는 설정입니다.
간단히 말하자면 엑박 안 뜨게 하겠다는 말이지요 :)

<IfModule mod_headers.c>
   Header set Access-Control-Allow-Origin "*"
</IfModule>

vi 에디터에서는 $ 키를 쳐서 커서를 맨 마지막으로 이동시킨 다음,

a 키를 누르면 입력 모드로 전환됩니다.

 

그 상태에서 Enter 키를 치고 위의 내용을 복사해서 Shift + Insert 키로 붙여넣어 주시면 됩니다.
뭐 그냥 타이핑해주셔도 무방합니다 :)

6. 이제 편집을 끝내고 저장해줍니다.
역시 vi 에디터에서는 esc 키를 눌러 편집 모드에서 일반 모드로 전환한 다음,
/wq! 를 순차입력하고 Enter 키를 쳐주면 설정파일이 저장되고 vi 편집기를 종료하여 다시 원래의 리눅스 화면으로 되돌아 옵니다,.

7. 한가지가 더 남았습니다! 
아파치 서버를 다시 시작해주셔야 하는데요.
아래 명령어를 쳐주면 아파치 서버가 재시작되고, 이제부터는 Cross-Origin.. 관련된 경고 메시지가 뜨지 않고 내 서버의 이미지가 다른 서버에서도 잘 보이실 겁니다.

service httpd restart

유용한 정보가 되셨는지요 ?
오늘도 읽어주셔서 감사합니다 :)