javascript, Access-Control-Allow-Origin Error

안녕하세요.

 

한창 개발공부를 할때 열심히 포스팅을 하곤했는데, 

요즘은 개발 이외에 것들이 관심이 많아져서 개발 공부는 하지 않게 되네요.

 

공부는 하지않지만 업무에 필요한 것들이 나오면 간단하게 적어 두려고 합니다.

몇년이 흘러도, 어디를 가서도 에러들은 항상 비슷한것 같습니다.

 

개발을 하다가 화면이 먹통이 되면

개발자 도구(F12)를 눌러 확인해 보세요.

 

저는 부모창과 자식 창을 활용하여

다른 서버와의 통신을 시도하고 있었습니다.

그리고 도중에 이와같은 에러를 발견했습니다.

 

사진은 잘 보이지는 않네요.

 

[에러]

ccess to XMLHttpRequest at '---------' from origin '--------------' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

'Access-Control-Allow-Origin' 어쩌구 하는 에러 입니다.

 

[원인]

다른 서버와의 통신은 보안의 이유로 인해 저러한 에러가 나오는데요.
다른서버 및 기타와의 통신이 다르다는것은 URL 주소로 확인해보면  쉽게 알수 있습니다.

ex)
https://www.naver.com:8080/user?id='id' 라고 할때 다음의 차이점으로 서로 통신 방법이 다르다고 할수 있습니다.
1. https(통신방법)
2. www.naver.com(호스트)
3. 8080(포트)

부모의 창과 자식의 창간 통신 방법중 위의 3가지가 다르다면 'Access-Control-Allow-Origin' 에러가 나올겁니다.

 

[해결]

여러가지 찾아봤지만, 저는 제일 간단한 방법으로 해결했습니다.
단순 jsp 페이지간 문제가 생겼기 때문이죠.
아래와 같은 구문을 자식창에 기재해 두었습니다.

window.document.domain = '부모창 호스트'; //부모창 조작을 위해 도메인 일치 필요

 

그럼 모두 고생하세요.