CORS ( 교차 출처 자원 공유 )

20년 9월 회사에서 React , koa 로 웹을 만든 경험이 있었다.

그 시기에 리액트 할 줄아는 사람은 없었다.

클라이언트와 서버를 따로 기동해 구성하였었다. ( port 가 다르다 . host까지는 같았다.. )

처음에 postman으로 테스트했을땐 문제가 없었던걸로 기억하는데

요청을 보낼때 마다 error 가 ...

아마 "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite"

이런 메세지를 봤던 기억이 난다.

간단한 기능도 되지않아 많이 당황했었다. 지금도 정확히 알지 못한다고 생각해 정리 하려한다.

---------------------------------------------------------------------------------------------------------------

MDN의 정의를 보면

교차 출처 자원 공유 (CORS)는 서버가 same origin 정책(same-origin policy)을 완화할 수 있게 해 주는 표준입니다.

라고 한다.

#Orgin (출처)이란?

https:// www.nave.com/user?oo 라고 하면

https - protocol

/user - path

?oo - queryString

여기서 출처란

protocol + host + port 를 합친 것 이 된다.

그러므로 같은 서버에서 react 와 koa 로 따로 기동 하였을때 port가 다르기 때문에

Cors error 가 발생하였다

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

'동일한 출처에서만 리소스를 공유할 수 있다'

1. 클라이언트 : http 요청 헤더에 Origin 을 담는다

2. 서버 : 응답헤더에 Access-Control-Allow-Origin 을 담는다.

# 해결책

1. chrome 확장 프로그램 Allow CORS: Access-Control-Allow-Origin , localhost 환경에서 API 테스트 시 유용

2. 프록시 사이트 이용.

-------

그 외 알게된 사실

HTML -> Cross-Origin 정책

script , XMLHttpRequest,Fetch API 등 -> Same-Origin 정책

참고

while 속 개발자