TIL CORS

1. 뉴스피드 프로젝트의 서버를 다 만들고
   회원가입/로그인/로그아웃/
   게시판 작성/조회/상세조회/수정/삭제
   댓글 작성/조회/수정/삭제

2. html/css를 이용해 뼈대를 만든 후 script파일을 만들어 fetch를 이용하여 우선 서버의 get방식을 이용해 게시글을 json형태로 console을 찍어보았다.

문제발생
=> 데이터는 가져와지지 않았고 개발자 도구에서 데이터를 가져올 수 없다는 문구만 계속해서 떴다.

이 때 쓴 스크립트 코드는 다음과 같다.

const options = {
  method: 'GET',
  headers: {
    accept: 'application/json',
  },
};
const call = async () => {
  const postsList = await fetch(`http://localhost:3030/posts/`, options).then(
    (res) => {
      return res.json();
    }
  );
  console.log(postsList);
};

원인!

검색하여 찾은 결과 프론트 서버(실제로 열었을 때 주소는 127.0.0.1:5500이었다.)와 백엔드 서버가 달라서 가져올 수 없다는 거였다.
왜 가져올 수 없다는 걸까?

이유는 CORS의 공식문서에 답이 나와있다.
https://developer.mozilla.org/ko/docs/Web/HTTP/CORS#%EC%96%B4%EB%96%A4_%EC%9A%94%EC%B2%AD%EC%9D%B4_cors%EB%A5%BC_%EC%82%AC%EC%9A%A9%ED%95%98%EB%82%98%EC%9A%94

• 보안 상의 이유로 브라우저는 HTTP요청을 제한한다.
  => 자신의 출처와 동일한 리소스만 불러올 수 있다.
  즉 내가 요청한 프론트의 127.0.0.1:5500 이 주소에서 만 리소스를 받아올 수 있었다는 얘기다.

해결방법 1) app.js에 다음과 같은 코드를 입력한다.

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500');
  res.setHeader(
    'Access-Control-Allow-Methods',
    'GET, POST, OPTIONS, PUT, PATCH, DELETE'
  );
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

코드를 보면 공통적으로 교차 출처 리소스 공유 사전요청을 헤더에 서버에서 보내주는 것을 허용하는 것으로
1) 아까 만든 html의 주소 127.0.0.1:5500을 넣어주고,
2) GET, POST, OPTIONS, PUT, PATCH, DELETE (CRUD 기능을 모두 사용하게 끔 허용)메소드들도 허용하고,
3) 이에 대한 응답으로 헤더를 다시 전송해준다는 뜻이다.

해결방법 2) npm i cors 후 적용

// cors 라이브러리 선언
const cors = require('cors');
// request data middlware => cors 라이브러리 전역으로 사용
app.user(cors()) 

이렇게 하면 백엔드와 프론트엔드의 보내는 리소스 주소가 달라도 받아와서 사용할 수 있게된다.