HTML5 中的 Web CORS 是什么？

HTML5 中的 CORS 代表跨域资源共享。 CORS 是一种机制，它允许一个 URL 上的网站以图像、文本甚至 API 的形式从不同的 URL 请求数据。这是一种基于 HTTP 标头的机制，它限制服务器从自身以外的任何其他端口或域加载资源。让我们通过一个例子来理解它：

解释：

在图像中，我们可以清楚地看到网站 geeksforgeeks 正在发出两个请求。一个来自 URL www.geeksforgeeks.com/api 。此 URL 与 geeksforgeeks.com 属于同一域，因此此请求将不受 CORS 机制的约束。
在第二个请求中，它查找 URL anotherdomain.com 。由于它与 geeksforgeeks.com 不在同一个域下，它将属于浏览器的 CORS 机制，浏览器可能会阻止此请求。

请求的原始标头：

当浏览器发出请求时，它会在请求消息中添加一个原始标头。如果该请求发送到同一来源的服务器，则浏览器允许它没有任何问题。
如果该请求转到不同的 URL，则称为跨域请求。
为了响应每个请求，服务器会将 access-control-allow-origin 标头添加到响应对象中。
响应的这个 access-control-allow-origin 标头的值必须与请求对象的 origin 标头匹配，或者被请求的服务器必须允许所有域。
在任何其他情况下，浏览器将停止与客户端共享响应数据并抛出 CORS 错误。

请求中 Origin 标头的图像

错误和浏览器策略：

自互联网诞生之初，CORS 错误就一直困扰着前端和后端开发人员。您的网站可能会尝试从另一个 API 获取数据并最终在控制台中出现 CORS 错误。发生这种情况是因为浏览器始终将相同的源策略作为其安全模型的一部分。

CORS 错误图像

此政策允许网站自由地从与同一域关联的 URL 请求数据，但阻止来自与另一个域关联的 URL 的任何内容，除非我们验证某些条件。

修复 CORS 错误：

我们必须在我们的 Node.js 应用程序中使用一个 CORS 中间件来从我们的服务器端修复这个错误。这将允许我们更改从我们的服务器发送的响应对象的access-control-allow-origin标头。

使用 npm 或 yarn 安装 CORS 包和 express.js。

npm install express
npm install cors

使用 cors函数使用origin关键字更改 access-control-allow-origin 标头。

Javascript

// Import Express
const express = require('express');
  
// Create the Express App
const app = express();
  
// Import CORS
const cors = require('cors');
  
// Set the access-control-allow-origin header
// for all the responses sent from this URL
// Using the origin keyword
app.use(cors({ origin: 'http://desired.url' }));