CORS란 무엇일까?
API를 연결할때 무조건 겪어보는 문제,, 혹은 프론트엔드 면접 질문으로도 나올 중요한 키워드이다!
❗그렇다면 CORS가 무엇일까??
CORS란 Cross-Origin-Resource Sharing으로 다른 출처의 자원에 접근할 수 있는 권한을 부여하는 것입니다.
예를 들어 CORS없이 모든 곳에서 데이터를 요청할 수 있게 된다면 다른 사이트에서 원래 사이트를 흉내낼 수 있게되는 큰문제가 생길 수 있습니다.
한마디로 CORS란 브라우저 에서는 보안적인 이유로 서버에 허용한 출처에 대해서만 접근 권한을 부여하는 것입니다.
예를 들어 프론트는 http://localhost:3000, 서버는 http://localhost:8000이라고 했을 때
프론트단에서 axios.get('http://localhost:8000')하게 되면 서로 다른 origin으로 인해 cors에러가 나타납니다.
아래 표는 http://localhost:3000 에서 다른 URL에 접근하여 자원에 대한 접근 유무를 나타냅니다.
❗CORS의 해결 방법은 무엇일까?
CORS 해결방법
제가 프론트 개발을 하다가 CORS 에러를 발견하고 해결했던 방법은 proxy 설정이었습니다.
일단 백엔드 개발자분이 계신 상황이라면 자원에 접근할 수 있게 요청을 드릴 수 있겠지만 그렇지 않은 경우라면 아래에 방법을 따라주시면 됩니다 :)
1. PROXY설정
- package.json파일에 proxy: 접근할 도메인 을 작성합니다.
...,
"proxy": "http://localhost:3001",
...- api요청할 때 url에는 end-point만 작성해도 됩니다.
예를 들어 아래와 같이 작성했던 것을
axios.get('http://localhost:3001/test')
.then((res) => {
console.log(res)
})
.catch((err) => console.log(err))아래와 같이 url에 end-point만 작성하여 수정하면 됩니다.
axios.get('/test')
.then((res) => {
console.log(res)
})
.catch((err) => console.log(err))❓그렇다면 proxy가 무얼일까??
proxy란?
대리라는 의미로 보안상의 이유로 직접 통신할 수 없는 두 점 사이에 통신을 할 경우 프록시를 이용해 중계를 하는 개념으로 생각하면 된다.
이렇게 중계 기능을 하는 것을 프록시 서버 라고 부릅니다.
