cors 문제

cors란?

 동일 출처 정책(same-origin policy) 때문에 CORS 같은 상황이 발생 하면 외부서버에 요청한 데이터를 브라우저에서 보안목적으로 차단합니다

출처 : https://velog.io/@wlsdud2194/cors

 

Cross-Origin Resource Sharing (CORS)은 추가 HTTP 헤더를 사용하여 브라우저가 한 출처에서 실행중인 웹 애플리케이션에 선택된 액세스 권한을 부여하도록하는 메커니즘입니다. 다른 출처의 자원. 웹 응용 프로그램은 자체와 다른 출처 (도메인, 프로토콜 또는 포트)를 가진 리소스를 요청할 때 cross-origin HTTP 요청을 실행합니다.

cross-origin request의 예: https://domain-a.com에서 제공되는 프론트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json를 요청.

보안 상의 이유로, 브라우저들은 스크립트 내에서 초기화되는 cross-origin HTTP 요청을 제한합니다. 예를 들어, XMLHttpRequest and the Fetch API는 same-origin 정책을 따르기에, 즉, 다른 API의 응답에 올바른 CORS 헤더가 포함되어 있지 않으면 해당 API를 사용하는 웹 응용 프로그램은 응용 프로그램이로드 된 동일한 출처의 리소스 만 요청할 수 있습니다.

출처 : https://developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS

 

 

그래서

클라이언트에서 서버쪽으로 데이터 전송을 할 때, 

withCredentials: true,

설정을 하고 데이터를 같이 보내줘야한다.

 

서버쪽 코드

app.use(cors({
    origin: 'http://localhost:7777',
    credentials: true,
}));