HTML - Web CORS: 初学者的指南

你好，有抱负的网页开发者们！今天，我们将踏上一段激动人心的旅程，探索CORS的世界。如果你之前从未听说过它，不用担心——在这个教程结束时，你将成为CORS专家！所以，拿起你最喜欢的饮料，舒服地坐下来，让我们一起深入了解！

HTML - Web CORS

CORS是什么？

CORS代表跨源资源共享。听起来可能有点复杂，但我用一个有趣的类比来为你解释。

想象你在一个高档餐厅（这就是你的网页浏览器），你想从街对面另一家餐厅订餐（这就是另一个网站）。通常情况下，高档餐厅不会允许这样做，因为他们希望你只吃他们的食物。但是有了CORS，就像高档餐厅说：“当然，去吧，从街对面订餐！”这是浏览器安全地允许网站从其他网站请求资源的一种方式。

我们为什么需要CORS？

在网络的早期时代，浏览器有一个严格的安全策略，叫做同源策略。这个策略阻止网站向其他域发出请求，这对安全来说很好，但对功能性来说就不那么好了。

随着网络的发展，开发者需要一种安全的方式来进行跨源请求。这就是CORS的用武之地，它为服务器提供了一种安全的方法来放宽同源策略，允许某些跨源请求。

CORS是如何工作的？

CORS通过一系列HTTP头工作。当一个网页向不同域发出请求时，浏览器会向请求中添加一个特殊的头，叫做Origin。然后服务器用包含告诉浏览器请求是否允许的头作为响应。

让我们来看一个简单的例子：

<!DOCTYPE html>
<html>
<head>
<title>CORS 示例</title>
</head>
<body>
<h1>CORS 在行动</h1>
<button onclick="makeRequest()">发出请求</button>

<script>
function makeRequest() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.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));

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

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

访问 'https://api.example.com/data' 从源 'http://yourwebsite.com' 被CORS策略阻止：请求的资源上没有 'Access-Control-Allow-Origin' 头。

如果你看到这个错误，不要慌！这意味着服务器没有配置允许从你的网站发出的请求。

CORS中的事件处理器

在使用CORS时，处理成功响应和错误是很重要的。让我们修改之前的例子，添加一些事件处理器：

<!DOCTYPE html>
<html>
<head>
<title>CORS 事件处理器</title>
</head>
<body>
<h1>带事件处理器的CORS</h1>
<button onclick="makeRequest()">发出请求</button>
<div id="result"></div>

<script>
function makeRequest() {
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('网络响应不是正常的');
}
return response.json();
})
.then(data => {
document.getElementById('result').textContent = JSON.stringify(data);
})
.catch(error => {
console.error('错误:', error);
document.getElementById('result').textContent = '发生错误：' + error.message;
});
}
</script>
</body>
</html>

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

CORS方法

CORS支持多种HTTP方法。下面是一个总结最常见方法的表格：

方法	描述
GET	从服务器检索数据
POST	向服务器发送数据以创建新资源
PUT	向服务器发送数据以更新现有资源
DELETE	请求服务器删除资源
HEAD	与GET类似，但只检索头，不检索主体
OPTIONS	用于描述目标资源的通信选项

记住，服务器必须配置为允许这些方法用于CORS请求。

结论

恭喜你！你已经迈出了进入CORS世界的第一步。我们介绍了CORS是什么，为什么需要它，以及如何进行基本的CORS请求。记住，CORS是关于在保持安全的同时使网络更加互联的。

在你继续网页开发之旅时，你将在许多不同的场景中遇到CORS。不要害怕那些CORS错误——它们是学习网络工作原理的机会！

继续练习，保持好奇心，快乐编码！

Credits: Image by storyset