학원에서 진행하던 Spring 팀프로젝트를 개인 포폴로 만들어 보기 위해 React를 Front로, Spring을 Back으로 진행 중에 언어가 다르니 너무 힘들어서... Back만 NestJS로 바꿨다.
처음에 TypeScript를 다뤄보지 않아서 NestJS로 진행하는 것을 고민했지만 현재 진행 중인 팀프로젝트도 NestJS고 같이 스터디를 했던 동료가 도와줘서 이 참에 공부하면서 진행해보기로 했다.
지금 작성하려는 글은 React와 NestJS를 연동하는데 CORS 오류가 문제가 되서 기억하기 위해 기록해 놓으려고 한다.
나는 NestJS와 React가 같은 포트를 사용하기에 React port를 변경해주었다. 변경하는 방법은 시작할 때 일시적으로 변경하는 방법과 이렇게 package.json에서 설정해주는 방법이 있다.
package.json
"scripts": {
"start": "set PORT=3002 && react-scripts start",
},발생한 오류
이렇게 오류가 발생했는데... 오류를 해결 하기 위해 번역을 해봤다.
"오리진 'http://localhost:3000/qna/'에서 가져오는 액세스가 CORS 정책에 의해 차단되었습니다. 사전 요청 응답이 액세스 제어 검사를 통과하지 못했습니다. 요청한 리소스에 '액세스-제어-허용-오리진' 헤더가 없습니다. 불투명 응답이 필요한 경우 요청 모드를 '노 코어'로 설정하여 CORS가 비활성화된 상태에서 리소스를 가져옵니다."
음.... 일단 CORS 오류인건 알겠다. header가 없다는데 무슨 말이지... 그래서 구글링을 했다...ㅎ
솔직히 말해서 CORS오류가 발생하면 Front 와 Back 둘 다 설정을 따로 해야되는 줄 알고 각각 설정했다.
React에서 설정하는 방법은 두가지다.
1. proxy 설정
package.json
{
"dependencies": {
"proxy":"http://localhost:3000/"
},- response header에 Access-Control-Origin 설정
나는 Get으로 보냈기 때문에 따로 method 설정을 하지 않고 headers 에만 옵션을 추가했다.
const getQnaList = async () => {
const res = await fetch("http://localhost:3000/qna/", {
headers: { "Access-Control-Allow-Origin": "http://localhost:3000", }
});그리고 나서 NestJS에서 CORS 설정을 해줬다.
main.js
app.enableCors();
await app.listen(3000);URL을 통해 들어오는 요청을 인식시켜주는 것이 CORS라고 생각해서 Front나 Back 한 곳에서만 설정하면 문제가 없는 듯하다. 아직 CORS에 대해 정확히 알고 있는 것이 아니라서 공부를 하고 추가로 내용을 올릴 예정이다.
여튼 이렇게 진행하면 원래 실행되야 맞는데......!!
nestJS에서는 데이터를 정확히 보내는데 React에서 데이터를 못받아오는것이다 ㅠㅠ
그래서 삽질을 좀 했는데 결론은 NestJS에서 설정하고 재시작을 하지 않아 삽질을 오랜시간 했다...그래서 재시작으로 오류해결...^^
서버를 실행할 때 이 명령어를 입력하면 서버를 실행할 때 터미널에 이렇게 dev를 입력하면 실시간으로 서버가 변경사항을 반영한다!!
npm run start:dev참고사이트
