2025/04/28 2

CORS (Cross-Origin Resource Sharing) 오류 해결 방법

CORS (Cross-Origin Resource Sharing)란?CORS는 웹 페이지가 다른 도메인의 리소스에 접근할 수 있도록 브라우저에게 권한을 부여하는 체제이다. 브라우저는 보안상의 이유로 다른 출처(Origin)의 리소스에 대한 HTTP 요청을 제한하는데, 이때 출처는 프로토콜, 호스트, 포트를 포함한다. 즉, CORS는 웹 페이지가 다른 출처의 자원을 요청하는 것을 제한하는 보안 메커니즘이라고 생각하면 된다. 나의 경우에는React는 localhost:3000Spring Boot는 localhost:8080서로 포트가 다르기 때문에 "다른 출처(Cross-Origin)"로 인식함.특히 PUT, POST 요청은 CORS preflight(사전 요청) 검사를 거치는데, 이걸 Spring 서버가 ..

[React] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

React - Spring 연동 시 Proxy 설정 프록시란?프록시(Proxy)는 "대리"의 의미로, 인터넷과 관련해서 쓰이는 경우, 특히 내부 네트워크에서 인터넷 접속을 할 때에, 빠른 액세스나 안전한 통신등을 확보하기 위한 중계서버를 "프록시 서버"라고 일컫는다. 클라이언트와 Web서버의 중간에 위치하고 있어, 대신 통신을 받아 주는 것이 프록시 서버이다. 왜 해야하는가?리액트의 기본 Port 넘버는 3000번, Spring은 8080번으로 서로 다르기 때문이다.CORS 문제가 생기므로 프록시 설정 필수. package.json에 아래와 같이 추가( 나같은 경우는 아래처럼 추가해도 안됐다..)"proxy": "http://localhost:8080" 원인(추측): 지금 이 문제는 proxy 때문이..

General/React⚛️ 2025.04.28