NodeJS - Server 분리 (Front, Back), CORS Error

---

목차

1. Front-end 구현

2. Back-end 구현

3. CORS Error

---

 

 

>> 간단하게 로그인 구현하기 <<

 

 

1. Front-end 구현

- port 3000

- 화면을 응답해주는 코드

- front 디렉토리만들고 → npm init -y  →  npm install express, nunjucks

- 디렉토리 구조 최소화

2. Back-end  구현

- port 4000

- back 디렉토리만들고 → npm init -y  →  npm install express, cors

- app.use(express.json()); 미들웨어 장착 →   axios사용

 

 

 

 

3. CORS Error

- XMLHttpRequest가 정책을 위반했다고 알려준 에러메세지로 포트를 잘못요청했다는 뜻!!!!

- 응답헤더에 허락했다는 메세지를 담아야함!!!

 

app.use((req, res, next) => {
    res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
    res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
    res.setHeader("Access-Control-Allow-Headers", "Content-Type");
    next();
});

app.use(cors());

- backend server에서 localhost:3000을 허락하겠다는것으로 cors 미들웨어를 장착해서 사용해준다!

- frontend에서 server를 열고 로그인을 했을때의 js파일을 만들어준다.

  - form에서 submit을 했을때의 처리를 try, catch로 작성한다.

 

 

 

---

※ CORS ( Cross-Origin Resource Sharing)

 

- 교차 출처 리소스 공유라는 뜻으로 웹 애플리케이션 개발에서 중요한 보안 개념이다. 
   이건 웹 페이지가 다른 도메인으로부터 리소스를 요청할 때 보안 문제를 다루는 것과 관련
   브라우저는 보안상의 이유로 스크립트에서 다른 출처의 리소스에 접근하는 것을 제한하고, 
   CORS는 이런 접근을 어떤 출처로부터 허용할지를 설정하는 메커니즘을 제공한다.

- HTTP 헤더를 사용해서 동작하는데, 서버는 요청을 받을 때 헤더에 
   Access-Control-Allow-Origin와 같은 값을 설정하여 어떤 출처로부터의 요청을 허용할지 지정해야한다.

- 예를 들어,웹 애플리케이션이 서버 A에 호스팅되어 있다면, 
  서버 A는 다른 출처인 서버 B로부터의 요청을 허용하기 위해 CORS 헤더를 설정해야한다.
  이렇게 설정된 서버 A는 브라우저가 서버 B로의 요청을 허용하게 되어 도메인 간의 데이터 교환을 안전하게 할수있다.