FireDrago
[배포] api 요청시 CORS 문제 본문
프론트 엔드 코드만 배포해보기
프론트 엔드에서 api 요청을 보내는 다음과 같은 html 코드가 있다.
<html>
<head>
</head>
<body>
<script>
// API 엔드포인트 URL
const apiUrl = 'https://www.inflearn.com/api/mentors?page=1';
// POST 요청에 필요한 데이터
const requestData = {
// 요청에 포함할 데이터 객체를 정의하세요.
// 예를 들어, key1: 'value1', key2: 'value2'와 같이 데이터를 추가하세요.
};
// Fetch를 사용하여 데이터를 가져오는 함수
function fetchData() {
// Fetch 요청 보내기
fetch(apiUrl, {
method: 'POST', // POST 요청으로 변경
headers: {
'Content-Type': 'application/json', // 요청 본문의 데이터 형식 설정
},
body: JSON.stringify(requestData), // 요청 데이터를 JSON 문자열로 변환하여 전송
})
.then(response => {
// 응답을 JSON 형식으로 파싱
return response.json();
})
.then(data => {
// 데이터를 사용하는 로직을 여기에 작성
console.log('데이터:', data);
})
.catch(error => {
// 오류 처리
console.error('오류 발생:', error);
});
}
// fetchData 함수 호출
fetchData();
</script>
</body>
</html>
raw.githack.com 사이트에 해당 코드의 깃허브 index 주소를 붙여넣기 하면,
URL in production에 주소가 생성된다. 해당 주소를 실행해보자
프론트엔드 코드로만 구성된 프로젝트를 간단히 배포할 수 있다.
단순 api 요청을 보내는 코드라 화면에 표시되는것은 아무것도 없지만,
api 요청은 전송되었고, CORS 오류가 발생한것을 볼 수 있다.
CORS (Cross-Origin Resource Sharing)
Cors 는 사용자를 보호하기 위한 웹 브라우저의 보안정책이다.
Cross-Origin은 기본적으로 현재 페이지의 출처(도메인, 프로토콜, 포트)와 다른 출처에 있는 리소스에 접근하는 경우를 말한다. 예를 들어, http://example.com에서 http://api.example2.com로 요청을 보낼 때
이를 Cross-Origin 요청이라고 한다.
CORS는 이러한 Cross-Origin 요청을 허용할지 말지를 결정하는 역할을 한다.
기본적으로 웹 브라우저는 보안 상의 이유로 Cross-Origin 요청을 제한한다.
서버가 적절한 CORS 헤더를 응답에 포함시키면, 브라우저는 해당 요청을 허용한다.
이때 Cors 설정을 서버가 담당하는데, Cors는 클라이언트 (브라우저)의 보안정책임을 헷갈리지 말자!
서버에서는 CORS 헤더를 통해 설정값을 줄 수 있고, 이에따라 브라우저는 Cross-Origin 요청을 허용하게된다.
Access-Control-Allow-Origin : 요청을 허용할 출처를 지정한다.
Access-Control-Allow-Methods : 허용할 HTTP 메서드를 지정한다. (GET, POST, PUT, DELETE)
Access-Control-Allow-Headers : 허용할 요청 헤더를 지정한다.
POST, PUT, DELETE 메서드의 요청의 경우 CORS는 OPTIONS 메서드를 통해 실제기능을 수행하기 전에
Preflight 요청을 먼저 보낸뒤 성공한 경우에만 본 요청을 보내는 방식으로 작동한다.
'프로그래밍 > 배포' 카테고리의 다른 글
| [배포] jenkins 사용하여 배포 자동화 하기 (0) | 2024.07.27 |
|---|---|
| [vultr] DB를 사용하는 프로젝트 배포하기 (0) | 2024.07.23 |
| pscp명령어로 원격서버 <-> 로컬 파일전송하기 (0) | 2024.07.22 |
| [배포] Vultr 이용하여 간단한 프로젝트 배포해보기 (0) | 2024.07.18 |
| [배포] 기본적인 리눅스 명령어 (0) | 2024.07.11 |
