현재 유튜브 api를 사용하여 데이터를 받아오는 요청을 보내고 있는 도중
cors에러와 대면하게 되었다.
진짜 하루 종일 찾아보았다.
withCredentials의 값도 true로 줘보고
client 상에서 할 수 있는 건 다 해본 것 같았다.
문제가 뭘까...
전 프로젝트들과 현재 내가 만들고 있는 프로젝트의 차이를 찾자면
server 가 필요 없다는 것이다.
그 동안 cors는 node.js 상에서
app.use(cors())일케 잡아주었다.
근데 나는 지금 client만 갖고 있는 입장이다.
그래서 생각한게 그럼 서버에서 유튜브로 요청을 보내는 것이다.
그래서 열심히 서버를 만들기 시작했다.
근데 한 30분 만들고 있 던 중 ..
내가 바보라는 것을 깨달았다.
서버의 존재 이유는 많겠지만 적어도 나는 데이터를 저장할 필요가 없다는 것이다.
그럼 서버가 없어도 cors를 잡을 수 있는 방법이 있지 않을까 ?
열심히 구글링을 해보았다.
답은 간단했다.
react script 상에서 proxy설정을 해주는 것
"proxy": "https://www.googleapis.com"를 package.json에 추가한다.
그럼 아름다운 응답을 받을 수 있을 것이다.
웹팩 개발서버의 프록시를 사용하게 되면, 브라우저 API 를 요청 할 때 백엔드 서버에 직접적으로 요청을 하지 않고, 현재 개발서버의 주소로 요청
웹팩 개발 서버에서 해당 요청을 받아 그대로 백엔드 서버로 전달하고, 백엔드 서버에서 응답한 내용을 다시 브라우저쪽으로 반환
https://react.vlpt.us/redux-middleware/09-cors-and-proxy.html
감사합니당
