CORS(Cross Origin Resource Sharing) 에러 발생 및 해결 방법

---

---

제목을 너무 위키어쩌고 처럼 쓰는것 같음

 

내용을

이것은 실제 상황이였습니다. 에러코드는

Access to XMLHttpRequest at 'URL 주소' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

로 시작하면 너무 또 무슨 광고에 나오는 소설같고 어떻게 시작해야할질 모르겠네.

 

아무튼 CROS(Cross Origin Resource Sharing)에러에 관해 설명을 약간 해보고 어떻게 해결했는지 설명을 해볼까한다.

 

1. CORS 란?

해결하기 위해 이것저것 많이 찾아봤는데, 너무나들 대단하게 적혀있어서 사실 머리가 아프다.

쉽게 설명하면 이렇다.

 

A나라에 사는 사람이 B나라에 사는 사람한테 편지를 보내고 답장을 받고 싶음
근데 둘 사이에는 국경이 존재하며, 두 나라는 서로 사이가 그닥 뭐 좋진 않아서
누군가의 허락 없이는 편지를 보내지도, 답장을 제대로 주지도 못함.

이런 상황이랄까?

설명이 맞는진 모르겠지만 조금 더 자세히 설명하면

cross origin resouce sharing 즉, 자료나 자원을 교류하는데 있어 그 기원이 다르다는 말이다.

 

그럼 왜 이런 문제가 발생할까?

뭐 당연한 이야기겠지만 위험하니까가 아닐까?

뭔가 인증되지 않은, 출처도 모를곳에서의 요청을 받거나 혹은 응답을 해주면 큰일나니까!

 

(아마 그래서 api같은거 호출해서 쓰는거보면, 호출에 대한 비용지불의 측면도 있지만,

보안의 측면에서도 api key가 따로 있는게 아닐까 생각이든다. 그리고 이 키값들이 바로 뭐 cors에서는 토큰일수도 있고!)

 

그리고 더 자세히 설명하자면 같은 주소값이라도 요청방식에 따라서, cors문제가 발생할수도 있다는데

우선 내가 겪은 상황은 내부 내트워크는 똑같은데 ip주소가 다른 상황이였다.

 

2. CORS를 어떻게 해결했는가?

CORS를 해결하는 방법은 찾아보니 두 가지가 있었다.

 

2-1. 프론트 서버 측의 문제 해결

프론트 측에서 브라우저나 받아오는 json값을 jsonp형식으로 받아오는것.

그런데 나는 방법만 찾아보고 이 방법을 사용하지않았다.

 

왜냐하면, get요청을 보냈을때 서버측에서 분명 내가 보낸건 문제없이 갔다고 떴는데,

나한테 올때만 문제가 생겼다는걸 이미 파악했었기 때문이다.

그래서 백 담당자님께 요청을 드렸다.

 

2-2. 백 서버 측의 문제 해결

우리 백은 spring을 통해 진행되고 있는데, @crossorigin이라는 어노테이션을 활용해서 결국 문제를 해결했다.

우선 문제해결을 위해서 들어오는 모든 주소에 대한 허용을 통해 되는지 확인만 해봤는데,

나중에 실제 서버에 올릴때, 이런 문제가 발생한다면 필요한 주소만을 할당해야겠지?

 

---

결국 우리 팀에서 생긴 문제고, 우리가 해결했긴했는데, 결국 블로그에 적혀있는 해결 내용들을 보고 적은 문서에 불구하다 생각이 들어

정확한 해결방식을 적기보다는 이렇게 해결했었다는 기록을 하려 이렇게 글을 쓴다.

 

다음번 프로젝트때 문제가 발생한다면 jsonp형식을 사용해서 데이터를 받아오는 작업을 해보려고 한다.

(근데 아마 콘솔에 계속 에러뜰것같아서, 그냥 서버측에서 처리해주는게 좋을듯 하다. 콘솔에 빨간거 뜨는거 보기싫엉)

 

---

참고자료 및 추가자료

 

교차 출처 리소스 공유 (CORS) - HTTP | MDN

 

CORS란? CORS를 해결해보자 | 구보현 블로그

 

[Spring Boot] CORS 를 해결하는 3가지 방법 (Filter, @CrossOrigin, WebMvcConfigurer)