항해99 👩‍💻35일차 TIL/WIL

🎉오늘의 한 일🎉

1. 이번주차 키워드인 CORS에 관하여 공부하였다. 

2. blog 로그인 유효성검사 부분을 수정한뒤 EC2에 재배포 하였다. 

 

🍧WIL 키워드🍧

CORS 

- 교차 출처 리소스 공유(Cross-Origin Resource Sharing)의 줄임말이다.

- 현재 브라우저로 접속중인 페이지에서 자바스크립트를 이용해 다른 도메인 또는 포트를 가진 주소로 요청을 하는 경우, 해당 리소스에 접근을 허용했는지 확인해 보안을 높인다. 

 

CORS 문제가 발생하는 이유 

- 브라우저는 주소(도메인,포트 중 하나라도)가 다른경우 리소스의 출처가 다르다고 판단한다.

- 브라우저에서 출처가 다르다고 판단하면 

• 브라우저가 요청하려고 시도했던 주소에 "OPTIONS"메서드를 이용해 요청을 의도적으로 허용하고 있는 게 맞는지 확인하다. 이것을 CORS prefligth라고 부른다.
• 요청을 받은 서버는 평소와 똑같이 응답을 한다.
• 응답을 받은 브라우저는 요청에 대한 허가를 받지 못했다고 판단하고 CORS 에러를 발생시킨다.

 

이것은 브라우저에서 구현된 비동기 요청 API에서만 동작하는 규칙으로, Thunder Client같은 API Client를 이용해 요청하는 경우에는 절대 발생하지 않는다. 

 

CORS 문제 해결

1) CORS 모듈 설치(터미널에서)

npm install cors

2) app.js 파일에서 추가해주기.

const cors = require('cors')

3) 미들웨어 추가

가. 모든 요청 허용

app.use(cors());

나. 특정 도메인만 허용 

const corsOption = {
  origin: "https://www.test-cors.org",
  credentials: true,
};

app.use(cors(corsOption));

 

 

🧡개인프로젝트🧡

EC2 재배포 

깃허브에 업로드한 코드를 git pull로 받아주고

git pull

pm2를 restart 시켜준다.

pm2 restart app