CORS(Cross-Origin Resource Sharing)

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

 

CORS 에러 이해하기

🚨 Access to fetch at ‘https://myhompage.com’ from origin ‘http://localhost:3000’ 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. 💬 'https://myhomepage.com'에서 'https://localhost:3000' 출처로 가져올 수 있는 액세스가 CORS 정책에 의해 차단되었습니다. 요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다. 불투명한 응답이 필요에 적합한 경우, 요청 모드를 'no-cors'로 설정하여 CORS가 비활성화된 리소스를 가져오십시오.

 

즉, 내 홈페이지 https://myhomepage.com 에서 다른 홈페이지 출처의 http://localhost:3000 의 리소스를 가져오는데 있어 CORS 정책으로 인해 차단된 것이다. 그리고 Access-Control-Allow-Origin 헤더가 뭐하는 놈인지도 모르겠지만, 이 놈이 없어서 문제인것 같기도 하고 그 뒤 문장은 뭔소리인지도 모르겠다.

 

에러 메세지가 불친절한 것은 아니지만, 아무래도 배경지식이 부족하다보니 어떻게 해결해야 할지 감이 안잡힌다.

우선, CORS의 다른 출처 리소스 공유 정책(Cross Origin Resource Sharing)이 어떠한 정책인지에 대해서 파볼 필요성이 있을 것 같다.

그전에 아까부터 출처, 출처 거리는데 이 출처(Origin)이 무엇인지 간단하게 살펴보자.

 

 

 

CORS의 저 에러는 브라우저의 SOP 정책에따라 다른 출처의 리소스를 차단하면서 발생되는 에러이며 CORS는 다른 출처의 리소스를 얻기 위한 해결 방안 이었던 것이다 요약하자면 SOP정책을 위반해도  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#3._CORS(Cross-Origin_Resource_Sharing)_-_%EA%B5%90%EC%B0%A8_%EC%B6%9C%EC%B2%98_%EB%A6%AC%EC%86%8C%EC%8A%A4_%EA%B3%B5%EC%9C%A0 

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