Fetch API
- fetch는 자바스크립트가 제공하는 메서드로 API 서버로 http 요청을 송신 및 수신할 수 있도록 도와준다.
- fetch는 url을 매개변수로 받거나 url과 options를 매개변수로 받을 수 있으며, Promise 오브젝트를 리턴한다.
- 따라서, then과 catch에 콜백 함수를 전달해 응답을 처리할 수 있다.
- 메서드를 명시하고 싶은 경우나 헤더와 바디를 함께 보내야 할 경우에는 두 번째 매개변수에 요청에 대한 정보가 담긴 오브젝트를 넘겨준다.
options = {
method: "POST",
headers: [
["Content-Type", "application/json"]
],
body: JSON.stringify(data)
};
fetch("http://localhost:8000", options)
.then(response => {
// 응답을 받아 처리할 내용
})
.catch(e => {
// 에러 발생 시 처리할 내용
})
);
CORS
크로스-오리진 리소스 셰어링의 약자로, 처음 리소스를 제공한 도메인이 현재 요청하려는 도메인과 다르더라도 요청을 허락해주는 웹 보안 방침
- componentDidMount 함수의 fetch 부분에서 백엔드 서버의 도메인으로 요청을 보낼 때, 브라우저는 2개의 요청을 보낸다.
- 첫 번째는 OPTIONS 메서드를 사용하는 요청으로, 보통 리소스에 대해 어떤 HTTP 메서드를 사용할 수 있는지 확인하고 싶을 때 보낸다.
- OPTIONS 요청이 반환되고 CORS 여부 및 GET 요청 사용 가능 여부를 확인하면, 두 번째 요청으로 원래 보내려고 했던 요청을 보낸다.
- 브라우저는 HTTP 요청의 헤더에 요청의 Origin을 함께 보낸다.
- HTTP OPTIONS 요청을 보내는 경우, 백엔드 서버는 요청을 보낸 리소스의 원래 서버, 즉 요청의 Origin을 확인한다.
- 만약 요청의 Origin이 자신과 같은 Origin이라면 요청을 수행하지만, 다른 경우에는 요청을 거절한다.
- CORS가 가능하려면 백엔드에서 CORS 방침 설정을 해줘야 한다.
- 모든 경로(/**)에 대해 Origin이 http://localhost:3000인 경우 GET, POST, PUT, PATCH, DELETE 메서드를 이용한 요청 허용
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:3000")
.allowedMethods("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS")
.allowedHeaders("*")
.allowCredentials(true)
.maxAge(MAX_AGE_SECS);
}
'Frontend' 카테고리의 다른 글
Promise와 async/await (0) | 2022.03.17 |
---|---|
ES6+ 문법 정리 (0) | 2022.03.17 |
react-router-dom과 로그인 인증 (0) | 2022.01.22 |
이벤트 처리 (0) | 2022.01.20 |
프론트엔드 기초 (0) | 2022.01.20 |