神秘的CORS：了解交叉原始资源共享如何有效-DEV365 开发者社区

在现代网络开发中，确保不同起源（域）之间的安全和控制的通信很重要。这是交叉资源共享（CORS）发挥作用的地方。

CORS 是由Web浏览器实施的基本安全机制，该机制管理来自一个来源的网页如何与另一个来源进行交互。

在本文中，我们将深入研究CORS的复杂性，揭开其内部运作的神秘作用，并探讨它如何保护在不同的Web起源上交换的数据的完整性和隐私。

了解交叉原始请求

在深入研究CORS的细节之前，让我们建立了解交叉原始请求的基础。

想象一个场景，在http://localhost:4000/上托管的网页希望从位于http://localhost:3000/data的API检索数据。在更简单的时间内，这种交互可能引起了人们对数据安全性和未经授权访问的担忧。 CORS通过添加控制和验证来解决这些问题。

图像显示了来自不同原点的网页交叉启示请求

CORS的作用

Cors充当守门人：将CORS视为驻留网络起源之间的虚拟守门人。启动交叉原始请求时，看门人评估该请求是否允许。

来源和安全性：来源是协议（HTTP或HTTPS），域和端口的组合。 CORS确保只有来自批准的起源的网页才能访问其他域上托管的特定资源。

带有原始标头的请求：当网页向外部资源提出请求时，它在请求中包含一个“原始”标头。此标头指示请求网页的来源。

用CORS标头的服务器响应：托管所请求的资源的服务器评估传入的“原始”标头。如果配置了服务器以允许请求的来源，则使用提供许可详细信息的CORS标头响应。

CORS的工作原理

1.重新要求使用原始标题：请求网页向其他域发送请求，包括“原始”标题。


async function fetchData() {
  try {
   const response = await fetch('http://localhost:3000/data', {
   method: 'GET',
   headers: {
     'Origin': ' http://localhost:4000'
     }
   });
   const data = await response.json(); 
   console.log(data);
   } catch (error) {
   console.error(error);
  } 
}

2.使用CORS标头的服务器响应：服务器检查针对其允许的起源的“原始”标头。如果授权该请求，则服务器使用特定的CORS标题响应以授予访问权限的特定CORS标题。


app.get('/data', (req, res) => {
  const allowedOrigins = ['http://localhost:4000', 'https://otherdomain.com'];
  const requestOrigin = req.headers.origin;

  if (allowedOrigins.includes(requestOrigin)) {
    res.header('Access-Control-Allow-Origin', requestOrigin);
    res.header('Access-Control-Allow-Methods', 'GET');
    res.status(200).json({ data: 'Response data' });
  } else {
    res.status(403).json({ error: 'Unauthorized origin' });
  }
});

3.浏览器检查和访问决策：浏览器与CORS标头一起接收响应。它验证了请求的来源与“访问控制”标头中指定的允许的起源匹配。如果它们匹配，浏览器允许访问。


async function fetchData() {
  try {
   const response = await fetch('http://localhost:3000/data');
   const data = response.json();
  } catch (error) {
   console.error(error);
   }
 }

4.块未经授权的访问：如果所请求的原点不在批准的列表中，或者如果丢失了CORS标题，则浏览器会阻止响应访问。这将屏蔽数据免于未经授权的访问。

战前请求

前飞行请求是交叉原始资源共享（CORS）机制的重要组成部分，浏览器使用是否允许特定的交叉原始请求检查服务器。

前飞行请求会在某些条件下自动触发，然后在提出实际请求之前。他们确保正确配置了服务器以处理交叉原始请求。

以下是前飞行请求在CORS中工作的方式：

1.complex请求：前飞行请求主要用于所谓的“复杂”请求。如果请求符合以下任何标准，则认为该请求很复杂：

它使用了http方法，除了get，head或post。
它使用setRequestHeader()方法设置自定义标题。
它以简单的文本数据（例如JSON，XML）作为请求主体发送数据。

2. Preflight请求：当浏览器检测到交叉原始请求是否复杂时，它会在发送实际请求之前自动向服务器发送前选项请求。此前请求包括以下标题：

Origin：请求网站的起源。
Access-Control-Request-Method：http方法实际请求。
Access-Control-Request-Headers：请求中使用的任何自定义标头的列表。

3.服务器响应：应配置服务器以使用适当的CORS标头响应前飞行请求。这些标头通知浏览器是否允许实际请求。相关标题是：

Access-Control-Allow-Origin：指定哪些起源是允许访问资源。该标头必须与请求网站的来源或设置为*以允许任何起源。
Access-Control-Allow-Methods：指定http方法允许实际请求。
Access-Control-Allow-Headers：指定自定义标题允许实际请求。

4。浏览器决策：基于服务器前请求的响应，浏览器决定是否继续进行实际请求。如果服务器用适当的标头响应，表明允许实际请求，则浏览器将发送实际请求。如果服务器不提供必要的标题或明确拒绝请求，则浏览器会生成CORS错误，并且不会发送实际请求。

5.实性请求：如果成功前请求成功，则浏览器将使用适当的标头发送实际请求到服务器。服务器处理请求并响应它。

重要的是要注意，飞行前过程通过确保服务器明确允许交叉原始请求并指定允许的方法和标头来增加额外的安全性。这有助于防止未经授权的访问和潜在的安全漏洞。

在服务器上设置CORS时，请确保您的服务器正确处理前飞行选项请求，并使用适当的CORS标头响应以指示实际请求的来源，方法和标题。

。

结论

总而言之，CORS充当了执行跨原始请求规则的守门人，确保只有授权的起源才能访问托管在不同域中的资源。

通过了解CORS的功能及其在维护安全的网络环境中的关键作用，开发人员可以信心浏览交叉通信的复杂性。

随着Web应用程序继续发展和互连，CORS仍然是一个坚定的监护人，在维护隐私和诚信原理的同时，可以实现安全的数据交换。