20230318 TIL

문제점

백앤드 API 서버를 프론트에서 요청했을 때 요청이 안되고 CORS 에러가 생긴다... 이게 그 유명한 CORS 에러..?

해결방법

cors 패키지를 설치하고 require해와서 사용하면 간단하게 cors를 설정할 수 있다!!!

const cors = require("cors");

origin은 허락해줄 url 즉, 프론트의 url이다. credentials 은 쿠키 정책이다. true 는 허용 false는 비허용

app.use(
  cors({
    origin: "*", //프론트의 url
    credentials: true, //쿠키정책
    optionsSuccessStatus: 200,
  })
);

알게된점

SOP (Same Origin Policy) : URL의 Protocol, Host, Port를 통해 출처를 확인해서 출처가 다른 경우 접근을 막는 체제

CORS (Cross Origin Resource Sharing) : 교차 출처 리소스 공유 시스템

- 추가 HTTP 헤더를 사용하여 한 출처에서 사용중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제

CORS의 종류

- Simple Request : 바로 본 요청을 보내서 접근할 수 있는지 확인

- Preflight Request : 사전 확인 작업 후 본 요청을 보내서 확인