9. 크로스 도메인(Cross Domain)

https://ooz.co.kr/232

CORS 크로스 도메인 이슈 (No 'Access-Control-Allow-Origin' header is present on the requested resource)

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=vefe&logNo=221672004264 

크로스 도메인(cross-domain) 이슈

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

 

 

크로스 도메인 : 서로 다른 도메인간의 호출

웹 브라우저 Javascript(JQuery)를 이용하여 AJAX 등을 통해 다른 도메인의 서버의 URL을 호출하여 데이터를 가져오는 경우 보안 문제를 발생시킴

ex)

우리 웹 서비스에서만 사용하기 위해 다른 서브 도메인을 가진 API 함수를 제공하는 API 서버를 구축하였는데, 다른 웹 서비스에서 이 API 서버에 접근하여 마음대로 API를 호출하여 사용한다면 문제가 됨
이에 Javascript 는 "Same Origin Policy(동일 출처 정책)" 라는 정책을 두어 다른 도메인의 서버에 요청하는 것을 보안 문제로 간주하고 이를 차단함

즉, Javascript는 자신이 속한 동일한 도메인 내에서만 서버 요청을 허용하고 처리
이것은 http://www.ozit.co.kr 도메인에서 호출된 AJAX는 http://www.ozit.co.kr 도메인 내에 있는 URL만을 호출할 수 있다는 의미로, http://www.ozit.co.kr 도메인에서 http://www.tistory.com 의 URL을 AJAX로 호출할 수 없다는 의미임. = 샌드박스(sandbox)

 

Webapp에서 ajax를 이용하여 REST API를 호출하면 브라우저 콘솔창에는 아래와 같은 에러가 뜬다

> XMLHttpRequest cannot load http://localhost:8080/v1/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access.

 

Javascript의 보안정책 중 하나인 Same-Origin Policy에 의해 원하는 회신을 받지 못하는 것을 말하며, 보안 상의 이유로 브라우저들은 스크립트 내에 초기화되는 cross-origin HTTP요청을 제한함

---

1. 웹서버에서 해결하는 방법

웹서버 httpd.conf 파일에 다음과 같이 설정하면 모든 사이트에서 자신의 서버에 접근할 때 리소스에 대한 접근을 허용함.

 

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

 

2. 웹서비스의 web.xml에 filter를 설정하는 방법

 

3. 소스단에서 설정하는 방법