CORS (Cross-Origin Resource Sharing)

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

 

 

Network 탭 Headers 부분

 

General

 

Response Headers

 

 

Request Headers

 

Request Headers에서  origin: https://platform.twitter.com

Response Headers에서 access-control-allow-origin: https://platform.twitter.com

 

이 경우에는 브라우저에서 보낸 출처(origin)와 서버에서 응답해준 접근이 가능한 출처(access-control-allow-origin)가 동일한 경우에는 CORS 에러가 발생하지 않는다.

 

만약 origin 과 access-control-allow-origin이 달랐다면 CORS에러가 발생했을 것 이다.

 

 

CORS에러 발생 예시

Access to fetch at 'https://api-kkeolmusae.com/v2/test' from origin 'https://kkeolmusae.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
main.8aa7e1b6663d6e10e0c9.bundle.js?8aa7e1b6663d6e10e0c9:1          GET https://api-kkeolmusae.com/v2/test net::ERR_FAILED 502

상황 : 브라우저에서 서버로 요청을 했으나, 서버에 Access-Control-Allow-Origin 정보가 없어서 에러가 발생 (서버에서 허용x)

 

 

 

+ 다른 출처로 요청할 때 세션이나 쿠키 정보를 담아야할 때, api를 호출할 때 `credentials: "include", `를 추가해야 한다.

fetch('https://example.com', {
  credentials: 'include',
});

그리고 서버에서도 

cors({
	origin: "https://www.example.com", // 허용하고자 하는 도메인. "*" 는 사용하지 못한다.
	credentials: true, // credentials: true 라는 옵션은 다른 도메인 간에 쿠키 공유를 허락할 때 사용한다.
}),

이런 식으로 설정해줘야 한다.

 

 

 

다만 서버쪽 cors 설정을 다음과 같이 할 수도 있는데

cors({
	origin: true,
	credentials: true,
}),

origin: true 라는 것은 모든 출처(origin)에서 오는 요청을 다 받겠다 라는 것이라 보안에 취약하다.

 

(origin: "*" 와 origin: true는 다르다.)

 

origin: true는 도메인 주소가 자동으로 Access-Control-Allow-Origin에 들어간다.

origin: "*" (와일드카드): 브라우저에 리소스에 접근하는 임의의 origin으로부터의 요청 코드를 허용한다.

 

 

굉장히 도움이 많이된 자료들

https://www.zerocho.com/category/NodeJS/post/5e9bf5b18dcb9c001f36b275

https://www.zerocho.com/category/NodeJS/post/5e9bf5b18dcb9c001f36b275

 

https://evan-moon.github.io/2020/05/21/about-cors/

CORS는 왜 이렇게 우리를 힘들게 하는걸까?

 

https://inpa.tistory.com/entry/NODE-%F0%9F%93%9A-CORS-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-cors-%EB%AA%A8%EB%93%88

[NODE] 📚 cors 모듈 - CORS 간편 설정하기

 

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

[WEB] 📚 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

 

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

Fetch 사용하기 - Web API | MDN

 

https://chuckchoiboi.github.io/cors-tutorial/

CORS Tutorial

 

https://www.hahwul.com/2019/04/10/why-failed-get-data-with-this-cors-policy/

Access-Control-Allow-Origin가 wildcard(*)일 때 왜 인증 정보를 포함한 요청은 실패하는가 😫