우선 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를 사용했다.
1번의 코드로 요청을 보내면 CORS에러를 마주하게 될 것이다.
CORS에러란 교차출처오류로 브라우저에서 발생하는 오류이다.
허용되지 않는 소스 위의 예시를 보면 프론트는 3000번 포트를 사용하고 백엔드는 5000번 포트를 사용하기 때문에 서로 출처가 다르다(프론트 http://localhost:3000, 백엔드 http://localhost:5000)
그렇기 때문에 브라우저에서는 왜 3000번 포트를 실행했는데 5000번 포트에서 데이터가 올까? 라고 판단하고 출처에 오류가 있구나 라고 확인하여 데이터를 받지 않는 것이다.(보안문제)
그렇기 때문에 백엔드 측에서 3000번 포트를 허용해줘야 한다.
// 백엔드
// 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에서 요청이 와도 허용해준다.
따라서 와일드 카드 부분에 적절한 소스를 넣어서 내가 허용해줄 출처만 입력해주면 된다.