HTML - Web CORS: A Beginner's Guide

안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 CORS의 세계로 흥미로운 여정을 떠납니다. CORS라는 이름을 들어본 적이 없으신 걸로担心 마세요 - 이 튜토리얼이 끝나면 CORS 전문가가 될 것입니다! 당신의 좋아하는 음료를 손에 쥐고 편안하게 앉아, 이제부터 시작해보겠습니다!

HTML - Web CORS

CORS는 무엇인가요?

CORS는 Cross-Origin Resource Sharing의 약자입니다. 이 이름이 복잡하게 들리지만, 재미있는 비유로 설명드리겠습니다.

당신이 고급 레스토랑(이는 당신의 웹 브라우저를 의미)에 앉아 있고, 다른 거리를 건너편에 있는 또 다른 레스토랑(이는 다른 웹사이트를 의미)에서 음식을 주문하고 싶다고 가정해봅시다. 일반적으로 고급 레스토랑은 당신이 그들의 음식만 먹도록 허용하지 않습니다. 하지만 CORS가 있으면, 고급 레스토랑이 "그쪽 거리를 건너편에 있는 레스토랑에서 주문해도 좋다!"고 말하는 것입니다. 이는 웹 브라우저가 다른 웹사이트에서 안전하게 자원을 요청할 수 있도록 허용하는 방법입니다.

CORS가 필요한 이유는 무엇인가요?

웹의 초기 시절, 브라우저는 엄격한 보안 정책인 Same-Origin Policy를 가지고 있었습니다. 이 정책은 웹사이트가 다른 도메인으로 요청을 보내는 것을 방지했으며, 보안 측면에서는 좋았지만 기능성 측면에서는 좋지 않았습니다.

웹이 진화하면서, 개발자들은 안전하게 크로스-오리진 요청을 보낼 수 있는 방법이 필요했습니다. 그래서 CORS가 등장하여, 서버가 Same-Origin Policy를 완화하고 특정 크로스-오리진 요청을 허용할 수 있는 안전한 방법을 제공했습니다.

CORS는 어떻게 작동하나요?

CORS는 일련의 HTTP 헤더를 통해 작동합니다.当一个网页向不同域发起请求时，浏览器会向请求中添加一个名为 Origin 的特殊头部。服务器随后会以包含告诉浏览器该请求是否被允许的头部作为响应。

简单的例子를 보겠습니다:

<!DOCTYPE html>
<html>
<head>
<title>CORS Example</title>
</head>
<body>
<h1>CORS in Action</h1>
<button onclick="makeRequest()">Make Request</button>

<script>
function makeRequest() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
}
</script>
</body>
</html>

在这个例子中，当你点击按钮时，它尝试从 https://api.example.com/data 获取数据。如果 api.example.com 上的服务器正确配置了 CORS，它会在其响应中包含允许你的网页访问数据的头部。

CORS 요청을 만드는 방법

이제 CORS 요청을 어떻게 만드는지 더 깊이 탐구해보겠습니다.我们会使用 Fetch API，这是在 JavaScript 中进行网络请求的现代且强大的方法。

fetch('https://api.example.com/data', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

这段代码向 https://api.example.com/data 发送一个 GET 请求。服务器的响应将决定请求是否成功。

如果服务器上正确配置了 CORS，你将在控制台中看到数据。如果没有，你将得到一个 CORS 错误，这可能是这样的：

Access to fetch at 'https://api.example.com/data' from origin 'http://yourwebsite.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

如果你看到这个错误也不要慌张！这只是意味着服务器没有配置为允许来自你的网站的请求。

CORS에서 이벤트 핸들러 사용

CORS를 사용할 때, 성공적인 응답과 오류를 모두 처리하는 것이 중요합니다. 이전 예제를 수정하여 이벤트 핸들러를 추가해보겠습니다:

<!DOCTYPE html>
<html>
<head>
<title>CORS with Event Handlers</title>
</head>
<body>
<h1>CORS with Event Handlers</h1>
<button onclick="makeRequest()">Make Request</button>
<div id="result"></div>

<script>
function makeRequest() {
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
document.getElementById('result').textContent = JSON.stringify(data);
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result').textContent = 'An error occurred: ' + error.message;
});
}
</script>
</body>
</html>

在这个例子中，我们为成功响应和错误都添加了事件处理器。如果请求成功，我们会将数据显示在页面上。如果有错误，我们会显示错误消息。

CORS 메서드

CORS는 다양한 HTTP 메서드를 지원합니다. 가장 일반적인 메서드를 요약한 표를 아래에 보여드리겠습니다:

Method	Description
GET	Retrieves data from the server
POST	Sends data to the server to create a new resource
PUT	Sends data to update an existing resource on the server
DELETE	Requests the removal of a resource on the server
HEAD	Similar to GET, but retrieves only headers, not the body
OPTIONS	Used to describe the communication options for the target resource

Remember, the server must be configured to allow these methods for CORS requests.

결론

축하합니다! CORS의 세계로的第一步을踏み出しました。私たちはCORSが何であるか、なぜそれが必要であるか、そして基本的なCORS要求をどのように行うかをカバーしました。CORSはウェブをより相互接続させながらセキュリティを保つ thing です。

あなたのウェブ開発の旅を続ける中で、さまざまなシナリオでCORSに遭遇するでしょう。CORSエラーやパニックにさらされることがないでください。それらは、ウェブがどのように動作するかを学ぶ機会です！

練習を続け、好奇心を持ち、ハッピーコーディングを！

Credits: Image by storyset