CORS 이슈 해결

서주·2024년 6월 7일

‘경비로봇 플랫폼 개발‘을 주제로 한 공모전에서 웹개발을 담당하고 있다.

백엔드로 nest.js, 프론트엔드로 react를 사용하고 있다.

백, 프론트 간 데이터를 주고받으려 시도하던 중에 cors에러가 발생했다.

자바스크립트 엔진 보안 규칙 중 SOP가 있다

SOP

: Same Origin Policy
protocol, domain, port가 모두 같아야 동일한 출처로 판단하며 동일한 출처끼리만 데이터를 주고받을 수 있다.

동일한 출처가 아님에도 데이터를 주고 받는 방법이 있다.

CORS

: Cross Origin Resource Sharing

CORS 이슈를 해결하는 방법은 프론트와 백 두 곳에서 설정해줄 수 있다.

React에서 해결

프록시 서버를 이용하면 된다.
package.json에서
“proxy” : “서버주소”
를 추가

Nest에서 해결

https://meir.tistory.com/m/496
여길 참고했다.

폰으로 벨로그 쓰기 어렵다
길고 자세하게 쓰고 싶은데 연등시간이 끝나간다

0개의 댓글