TIL

이번 TIL은 내가 겪은 CORS에러에 대해서 트러블 슈팅 할 시간을 가질려고 한다.

앞에서 간단하게 어떻게 발생했고 해결은 어떻게 했는지 기록했는데 에러 기록을 위해서 다시 정리하려고 한다.

---

1.CORS란 무엇인가

cross-origin이 다를 경우 보안을 위해서 서버의 동의가 필요해서 나는 에러이다.

cross-origin?
 프로토콜 - http와 https는 프로토콜이 다른 것이다.
 도메인 - domain.com과 other-domain.com은 다른것이다.
 포트 번호 - 8080포트와 3000포트는 다른 것이다.

이 위에서 한 개라도 다른 경우를 말한다.

그래서 요청을 보내는 프론트 주소와 받는 백엔드 주소가 다르면 CORS에러가 발생한다.

 

그럼 어떻게 해결하나🧐

서버에서 응답 메시지 Access-Control-Allow-Origin 헤더에 프론트 주소를 적어주어야 에러가 나지 않는다.

※서버에서 기입을 해야하는 것임!

// 요청을 보내는 프론트 주소 기입
Access-Control-Allow-Origin: http://localhost:3000

// 만약에 지정하기 어렵다 하면 이렇게 전체를 다 할 수 있다.
Access-Control-Allow-Origin: *

2.Open API 인디요❓

그럼 서버에 내가 설정을 할 수 없으니 프록시 서버를 설정해야한다.

//package.json
{
    "proxy": "요청할 주소 "
}

요청할 주소가 만약에

localhost:9000이다? 그럼 이 주소를 저기다가 적어주고 

그뒤에 나오는 주소들은

axios.get('http://localhost:9000/api/user) 라고 적어서 요청 하던 것을 axios.get('/api/posts')라고 간단하게 적을 수 있다.

 

=> 근데 결론적으로 난 이렇게 안됬었다.

 

3.그래서 https://cors-anywhere.herokuapp.com/

 

간단하게 이 주소를 내가 요청할 api주소 앞에다가 넣어주면되었다. 그럼 이 주소가 프록시 된 요청에 CORS헤더를 추가해준다.

그렇지만 이 방법도 남용이 되면서 이젠 저 사이트에 직접 들어가서 잠금을 해제해야한다.

지금까지 하루에 한번 눌러놓으면 프로젝트 만드는 동안은 계속해서 돌아가는 것 같다.

불편함은 크게 없어서 아직까지 사용 중 제발 잘 되어라🙏🏻

 

4.해결⚒️

그래서 어떻게 저렇게 해서 데이터를 잘 가져와서 기능을 시작하고 있다.

열심히 하자👍