Same-Origin Policy 위반으로 인해 발생하는 문제 해결하기

파일서버의 도메인이 변경되면서 브라우저의 Same-Origin Policy 위반으로 인해 발생하는 문제가 발생했다....ㅠㅠ 서로 다른 출처(도메인, 프로토콜, 포트)를 가진 문서 간의 상호작용을 제한하는 정책인데 파일 서버의 도메인이 달라서 + ajax 작동 시 iframe을 사용해서 문제가 발생한 것...

운영에서 바로 확인을 진행하다 보니 처음에는 서버로 요청이 들어오는 부분을 수정해야 한다고 생각했으나 크롬 개발자도구에서 네트워크를 확인하면서 다시 생각해보니 서버에서 나갈 때를 수정해야 한다는 것을 깨달았다 그럼 이제 해결해보자.....

1) 헤더 설정

String origin = request.getHeader("Origin"); if (origin != null && (origin.equals("주소1 작성") || origin.equals("주소2 작성"))) {     response.setHeader("Access-Control-Allow-Origin", origin); } response.setHeader("Access-Control-Allow-Origin", origin); // 동적으로 설정 response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS"); response.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");

response.setHeader("Access-Control-Allow-Origin", "*"); 으로 해도 되지만 조금이라도 보안성을 높이기 위해서 동적으로 설정하였다. 기존 도메인과 변경된 파일 서버 도메인을 넣어주었다. 또한 "Content-Security-Policy"도 설정해 주었는데 위에는 생략하였다. 
만약 response.setHeader("Access-Control-Allow-Credentials", "true");를 사용하려면 ajax에서 요청하는 부분에도 추가해주어야 하고 Access-Control-Allow-Origin이 "*"면 충돌이 일어나 사용할 수 없으므로 주의한다. 

2) iframe 사용 방식 변경

iframe: true 옵션이 문제일 수 있어 이 부분을 없애고 일반 Ajax 요청으로 처리하도록 javascript 부분을 수정하였다.

항상 문제를 정확하게 파악하고 오류를 잡는 것이 중요하다는 걸 다시 생각하게 되었다. 반성반성