[nodejs] 자바스크립트 에이젝스 도메인 다른 백, 프론트 서버 연결하기

웹 개발시, 자바스크립트로 외부 서버의 경로로 ajax요청(axios, fetch 등) 날리면 에러가 나면서 요청이 실패한다.

 

(front 서버 도메인과 back 서버 도메인이 다른 경우)

 

웹 브라우저 콘솔에 아래와 같은 에러가 찍힌다.

 

필자는 크롬을 사용하기 때문에, 크롬을 예시로 들겠음. 

 

No Access-Control-Allow-Origin header is present on the requested resource. Origin ‘[요청한 도메인] is therefore not allowed access.

 

외부로 요청이 안 되는 것은 자바스크립트 엔진 표준 스펙에 동일 출처 정책(same-origin policy)이라는 보안 규칙이 있기 때문이다.

 

Same Origin Policy [동일 출처 정책]

 

https://code.google.com/archive/p/browsersec/wikis/Part2.wiki#Same-origin_policy

Google Code Archive - Long-term storage for Google Code Project Hosting.

추가 한정자가 없는 "동일 출처 정책"이라는 용어는 일반적으로 자바스크립트와 기타 스크립트 언어가 도메인 간 DOM 속성과 메소드에 접근할 수 있는 기능을 지배하는 메커니즘을 가리킨다. 본질적으로 이 모델은 다음과 같은 3단계 의사결정 프로세스로 요약된다.

프로토콜, 호스트 이름 및 - Microsoft Internet Explorer 이외의 브라우저의 경우 상호 작용하는 두 페이지의 포트 번호가 일치하면 추가 검사 없이 액세스가 허용된다.

모든 페이지에서 document.domain 매개변수를 현재 호스트 이름의 완전한 부분으로 설정할 수 있다(예: foo.bar.example.com는 example.com으로 설정할 수 있지만 ample.com은 설정할 수 없습니다). 두 페이지가 명시적으로 상호적으로 각각의 document.domain 매개변수를 동일한 값으로 설정하고 나머지 동일한 발신지 검사를 만족하는 경우, 접근 권한이 부여된다.

위의 조건 중 어느 것도 충족되지 않으면 액세스가 거부된다.

 

즉, 프로토콜, 호스트명, 포트가 같아야 같은 도메인이다!! 같은 도메인이 아니라면 엑세스가 거부된다!!

 

 

해결법?

 

CORS (Cross-Origin Resource Sharing)

웹 브라우저에서 외부 도메인 서버와 통신하기 위한 방식을 표준화한 스펙이다.

서버와 클라이언트가 정해진 헤더를 통해 서로 요청이나 응답에 반응할지 결정하는 방식으로 교차 출처 자원 공유(cross-origin resource sharing)라는 이름으로 표준화가 되었다.

 

 

https://ko.javascript.info/fetch-crossorigin

CORS