[JQuery/Javascript/ERROR] HTTP CORS 크로스도메인 요청 에러

XMLHttpRequest cannot load http//localhost.com. No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Origin ‘http//localhost.com is therefore not allowed access. 

 

 항상 로컬에서 테스트용으로 파일첨부를 개발할 때 주로 발생하게되요.

 전 알면서 항상 보는 에러이긴 한데, 이 에러보면 그때서야 "아! 맞다... 호스트 다르지..." 하고

 전 보안설정을 풀어버리는 방법을 주로 사용합니다. 어차피 개발 테스트용이니 !

 

- CORS 의 발생 원인

 

동일 출처 정책 ( Same-Origin Policy )

웹에서는 동일 출처 정책을 적용하고 있는데, 이는 동일 호스트의 동일 포트에 접근하는 경우에만 허용하는 정책입니다.

예를 들어, A 사이트를 접근하고 있는 브라우저에서 B 호스트로 어떤 API를 요청한다면, 정책을 위반하는 행위로 인해 CORS 에러가 발생하면서 차단하게 됩니다.

 

아래 그림으로 보면 이해가 빠를겁니다. 조금 쉽게 설명해보려고 합니다 !

 

이 그림의 예제에서는 실제 접속 호스트가 달라서 발생하고, 만약에 로컬에서 실행을 하는 테스트에서 발생한 에러라면?

<input type="file"/> 로 첨부를 해서, 로드하는데 ajax 에서 발생하는 cross-origin 도 있습니다.

 

이 경우에도 URL을 좀 깊게 생각을 해보면, 실제 접속하는 url은 c:\html\index.html 이라고 가정할 때

선택된 파일은 c:\file\upload.txt 로 하면서 호스트가 바뀌었다고 체크되어 cross-origin 이 발생하게 됩니다.

 

 

그렇다면 이 오류를 해결하기 위해서 저는 보안을 해제한다고 했는데 지금부터 따라하시면 됩니다.

 

- 해결하기

1) 바탕화면이던, 시작표시줄이던, 크롬 오른쪽 버튼클릭 > 속성을 눌러줍니다.

2) 그리고 제가 선택해놓은 "대상"의 텍스트 박스에서 맨 뒷 부분에 아래 옵션을 추가해주고, 확인을 눌러줍니다.

--disable-web-security --user-data-dir="D:\Temp\ChromeSecurityTempFile"

 

--user-data-dir 은 원래 사용안하던 옵션이었는데, 최근에 크롬이 업데이트 되면서 사용자 임시파일을 지정해줘야되게 되어, 임시폴더를 미리 만들어놓은 후 해당 폴더를 지정해주면 크롬 실행해서 접근시마다 임시폴더에 브라우저 접근 임시파일들이 생겨나게 됩니다. 개발이 마무리 되거나, 중간중간 임시폴더에 있는 파일들은 제거해주면서 디스크 용량 관리를 할 수 있습니다.

 

3) cross-origin 이 발생하거나, 이러한 개발이 진행되는 것을 테스트할 때에는 이 설정을 해놓은 파일로 실행하면 에러 없이 개발진행이 가능합니다.

 

※ 설정한 크롬 브라우저를 실행하게 되면 "지원되지 않는 명령줄 플래그(--disable-web-security)를 사용 중이므로 안정성과 보안에 문제가 발생합니다." 라고 경고 문구가 생겨지는데 자체 개발 테스트용이니 무시하고 사용합니다.