cors

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

일단 사이트 부터 던져보려고 한다. 이거 보면 내개념은 볼필요 없으니 ㅅㄱ

 

프엔에서 뭔 헛짓거리를 해서 나오는것도 아니고 갑자기 빨간줄이 나오면서 CORS문제가 떳다 라는 문구를 본적이 있을 것이다. 내가 실수 한것도 아니고 이게 뭐지?? 

 

CORS는 함축 단어로써 이를 풀면 Cross-Origin Resource Sharing 이라는 단어로 이루어 져 있다.

이 문장을 직역하면 "교차 출처 리소스 공유 정책"이라고 해석할 수 있는데, 여기서 교차 출처라고 하는 것은 (엇갈린) 다른 출처를 의미하는 것으로 보면 된다.

 

그래서 그게 뭔데 씹덕아 라고 나한테 물어 보고 싶다. 

그래서 더 찾아봤다. 그래서 이게 뭐라고?

 

이것을 알아보기 전에 ORIGIN이라는것부터 먼저 알아 보자. 아마... 도?

 

ORIGIN 즉 출처란 주소창에 나와있는거 그거 예를 들어 https:// 는 국제 프로토콜 www.~~는 HOST 그 뒤의 /??? 는 Path 경로 그리고 포트번호 랑 나머지 뭐 잇는데 굳이 아직은 알필요성은 모르겠다.

 

 그니까 ORIGIN이라는것은 서버의 취치를 찾아가기 위해 필요한 가장 기본적인것들의 집합이라 생각이 된다.

그래서 CORS는 동일 출처가 아닌 경우 접근을 차단한다 이말이다.

 

이거 왜하는데 씹덕아 라고 말하면 해커가 CSRF(Cross-Site Request Forgery)나 XSS(Cross-Site Scripting) 등의 방법을 이용해서 우리가 만든 어플리케이션에서 해커가 심어놓은 코드가 실행하여 개인 정보를 가로챌 수 있다.

 

라고 하는데 솔직히 뭔소린지 모르겟다. 그냥 해킹 방지용이라고 생각하면 된다 라고 이해 해둬라 씹덕아

 

이거 왜 공부하냐 라고 말한다면 

 

export const baseAxios = axios.create({
  baseURL: `${process.env.REACT_APP_SERVER_URL}`,
  headers: {
    "Access-Control-Allow-origin": "http://localhost:3000",
    "Content-type": "application/json",
  },
});

 

여기서 Access-Control-Allow-origin 이게 뭐얌...? 이거 클라이언트측에서 쓰는거얌? 이거엿다

결론 프론트에서는 저거 쓸일 없다 씹덕아 저거 백엔드에서 날리는거고 cors해결하려면 저거랑 위에 클라이언트측에서 보내는 주소랑 일치하뉘? 이거 만 생각하면된다.