[Ajax] origin 'null' has been blocked by CORS policy 해결

기억을 떠올리기 위해 오랫만에 간단한 Ajax를 시도하고 있었는데

 

오류가 발생했습니다.

 

이 오류의 원인은 간단히 말하면 '로컬환경에서 실행했기 때문' 입니다.

 

왜 로컬환경에서 실행한게 원인인가요?

 

그 이유는 동일 출처 정책 즉 SOP (Same Origin Policy) 때문입니다.

 

간단하게 얘기하면 같은 출처에서 불러온 리소스가

다른 곳에서 불러온 리소스와 상호작용하는 것을 막는

브라우저의 보안 방침입니다.

 

근데 로컬이면 같은 곳에서 실행되는게 아닌가 싶었습니다만

 

다른 분 블로그를 보고 이유를 알았습니다.

 

local의 리소스는 출처가 null 이기 때문에 걸린다는 것을요..

 

출처가 null 리소스는 상호작용이고 나발이고 불러오는 순간 SOP에 걸리게 된다고 하네요..

 

그래서 제 서버에 올려보았고

 

정상적으로 작동되는 것을 확인하였습니다.

---

정리

1. 출처가 다른 리소스가 또 다른 출처의 리소스와 상호작용 하는 것은 SOP 규정으로 금지되어있다.

2. 로컬 환경에서는 리소스의 출처가 NULL로 규정되기 때문에 Ajax 등으로 불러오는 순간 SOP에 걸린다.