js ajax 크로스도메인 요청 에러 (CORS) Access to XMLHttpRequest at from origin has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to XMLHttpRequest at '[요청한 API 주소](서버측)' from origin '[현재 내 주소](클라이언트측)' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
(웨일브라우저)
-최근 크롬이 개발자도구만 키면 로그인세션이 해제되서 무한 로그인페이지로 이동하는 현상이 나타나서 어쩔수 없이 크롬과 동일한 개발자도구를 사용하는 웨일브라우저로 작업하고있다.


이미지를 불러오려고 로컬 서버에서 테스트 서버로 ajax 요청을 보냈더니 위와 같은 에러가 났다.
외부서버로 요청이 안되는 것은 자바스크립트 엔진 표준 스펙에 동일 출처 정책 (same-origin policy) 이라는 보안 규칙이 있기 때문이라고 한다.

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

자바스크립트 Ajax로 다른 페이지를 호출할 때는 같은 출처의 페이지만 접근이 가능한 정책이다.
같은 출처라는 것은 프로토콜, 호스트명, 포트가 같다는 것을 의미한다.

아무튼 이 방식이 초기에는 웹 사이트 보안을 위한 좋은 방법으로 생각되었으나, 시간이 지나면서 여러 도메인에 걸친 대규모 웹 프로젝트가 늘어나고, REST API 등을 이용한 외부 호출이 많아지는 상황에서 점점 거추장스러운 정책이 되었다.

그래서 만들어진 추가 정책이 CORS(Cross-Origin Resource Sharing)이다. 이 정책의 특징은 서버에서 외부 요청을 허용할 경우 ajax요청이 가능해지는 방식이다.

그러나 나는 당장 서버를 손 볼 상황이 안되기 때문에 서버의 도움없이 동일 출처 정책을 회피하여 외부 서버로 요청을 날릴 수 있는 몇 가지 방법을 가져와봤다.


1. 웹 브라우저 실행 시 외부 요청을 허용하는 옵션을 사용
동일 출처 정책은 결국 클라이언트인 웹 브라우저가 요청을 해도 되는지 판단해서 결정하는 것이므로 이 과정을 무시한다면 어디든 요청 가능하다. 크롬 같은 웹브라우저들은 실행 시 커맨드 라인 옵션을 통해서 외부 도메인 요청 가능 여부를 확인하는 동작을 무시하게 할 수 있다.

크롬의 경우
--disable-web-security 옵션을 추가하여 크롬 실행


2. 외부 요청을 가능하게 해주는 플러그인 설치
서버에서 받은 요청의 응답에 특정 헤더(Access-Control-Allow-Origin: *)만 추가하면 웹 브라우저가 요청이 가능한 사이트로 인식해서 요청이 가능하다. 크롬의 경우 웹 스토어에 요청을 가로채서 응답에 위 헤더를 추가해주는 플러그인이 있다. 웹스토어에서 cors로 검색하면 확장 프로그램 검색 결과에서 찾을 수 있다.

추천하는 플러그인
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?utm_source=chrome-ntp-icon




출처 : https://brunch.co.kr/@adrenalinee31/1

javascript ajax 크로스도메인 요청-CORS