[MongoDB] CORS 허용

1. Front와 Back 연결하기

우선 Front 코드에서 Backend를 연결할 수 있도록 요청을 보내야한다.

// front

// 요청함수

const getData = async() => {
	try{
    	const response = await fetch("http://localhost:5000/api주소", {
        	method : "POST",
##           	headers: {
            	"Content-Type" : "application/json"
            },
          	body: JSON.stringify({
            	name : "테스트"
            })
        })
        const responseData = await response.json()
        console.log(responseData)
    }catch(err){
    	에러 함수
    }
}

보통 이렇게 작성할 것이다.

우선 fetch를 안쓰고 axios같은 다른 서드파티 라이브러리를 사용해도 무방하지만 기본적인 것을 알기 위해서 기본 내장 라이브러리인 fetch를 사용했다.

2. 요청을 보내면

1번의 코드로 요청을 보내면 CORS에러를 마주하게 될 것이다.

CORS에러란 교차출처오류로 브라우저에서 발생하는 오류이다.

허용되지 않는 소스 위의 예시를 보면 프론트는 3000번 포트를 사용하고 백엔드는 5000번 포트를 사용하기 때문에 서로 출처가 다르다(프론트 http://localhost:3000, 백엔드 http://localhost:5000)

그렇기 때문에 브라우저에서는 왜 3000번 포트를 실행했는데 5000번 포트에서 데이터가 올까? 라고 판단하고 출처에 오류가 있구나 라고 확인하여 데이터를 받지 않는 것이다.(보안문제)

그렇기 때문에 백엔드 측에서 3000번 포트를 허용해줘야 한다.

3. 백엔드 CORS 해제하기

// 백엔드

// app.js

app.use((req, res, next) => {
	res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept, Authorization"
  );
  res.setHeader("Access-Control-Allow-Methods", "GET, POST, PATCH, DELETE");

  next();
})

위와 같이 작성해주면 된다

Access-Control-Allow-Origin 에서 *은 모든 출처를 허용해준다는 와일드카드로 이렇게 작성하면 3000번에서 요청이 오든 www.naver.com에서 요청이 와도 허용해준다.

따라서 와일드 카드 부분에 적절한 소스를 넣어서 내가 허용해줄 출처만 입력해주면 된다.