CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)

▼ CORS란?

브라우저에서 실행 중인 스크립트에서 시작되는 cross-origin HTTP 요청을 제한하는 브라우저 보안 기능으로,

브라우저와 서버의 도메인이 일치하지 않으면 기본적으로 요청이 차단된다.

이 현상은 브라우저에서 서버로 요청을 보낼 때만 발생하고, 서버에서 서버로 요청을 보낼 때는 발생하지 않는다. 

 

 

[출처] https://docs.oracle.com/cd/E55956_01/doc.11123/user_guide/content/general_cors.html

위의 사진처럼 api 서버의 url과 동일한 Domain A의 경우 에러가 발생하지 않으나

Domain B의 경우 CORS 에러가 발생한다.

 

 

 

▼ CORS 문제를 해결하기 위해서는?

→ 응답 헤더에 Access-Control-Allow-Origin 헤더를 넣어야 한다 (클라이언트 도메인의 요청을 허락하겠다는 뜻을 가짐)

 

(아래의 방법은 nodejs와 express로 api 서버를 개발하는 경우의 예시로, 보안은 일절 신경 안 씀)

 

Access-Control-Allow-Origin 헤더를 넣기 위해 res.set 메서드로 직접 넣어도 되지만,

npm 패키지 'cors'를 이용하면 쉽게 사용 가능하다

npm i cors

 

설치 후 cors를 불러와 적용해보자

const cors = require('cors');
const app = express()
app.use(cors());

 

모든 클라이언트 도메인의 요청을 허용하게 되므로, 간단한 학습 용도로만 사용하자.

 

 

 

 

 

 

+ 프록시 서버 사용하는 방법도 존재.

서버에서 서버로 요청을 보낼 때는 CORS 문제가 발생하지 않는다는 것을 이용한 방법.

[출처] node.js 교과서

 

 

 

[참고] https://ko.javascript.info/fetch-crossorigin

[참고] https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

[참고] https://docs.aws.amazon.com/ko_kr/apigateway/latest/developerguide/how-to-cors.html

[참고] https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=246391275 

[참고] https://www.npmjs.com/package/cors