📜  跨域资源共享 (CORS)

📅  最后修改于: 2022-05-13 01:56:25.734000             🧑  作者: Mango

跨域资源共享 (CORS)

CORS(跨源资源共享)是一种机制,通过该机制,网站的数据或任何其他资源可以在需要时有意共享给第三方网站。通常,出于安全目的,浏览器客户端会限制对驻留在第三方站点中的资源的访问。

进行 HTTP 调用的客户端代码如下所示,

function httpGetAction(urlLink)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", urlLink, false ); 
    xmlHttp.send();
    return xmlHttp.responseText;
}

此原生 JavaScript 方法旨在通过GET方法对给定链接urlLink进行 HTTP 调用,并从第三方资源返回响应文本。

默认情况下,浏览器会阻止对非父域(您发出呼叫的域以外的域)的请求。如果您尝试这样做,控制台将抛出以下错误。,

Failed to load https://contribute.geeksforgeeks.org/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.google.com' is therefore not allowed access.

当然,在某些情况下,您需要访问第三方网站,例如获取公共图像、进行非状态更改 API 调用或访问您自己拥有的其他域。有一些方法可以在必要时实现这一目标。

人们可以从错误消息中得到一个想法,即所请求的资源上不存在Access-Control-Allow-Origin标头。它只是意味着您尝试访问其资源的目标网站没有明确允许您从他们的网站获取资源。

这可以通过额外的 HTTP 标头Access-Control-Allow-Origin来完成。此标头可以采用以下值。,

  • 访问控制允许来源:[来源]
    示例:访问控制允许来源:https://contribute.geeksforgeeks.org
    这允许您专门允许一个网站访问您的资源。在这种情况下,https://contribute.geeksforgeeks.org 可以访问您的网络资源,因为它是明确允许的。
    这需要从请求客户端发送一个名为ORIGIN的附加标头,其中包含其主机名。该来源标头与允许的来源相匹配,并决定对资源的访问。
  • 访问控制允许来源:*
    示例:访问控制允许来源:*
    通配符 (*)字符任何站点都可以访问您在站点中拥有的资源,显然它是不安全的。

      根据请求方法(GET/PUT/POST/DELETE)和请求头,请求分为两类。

    1. 简单请求
    2. 非简单/复杂请求

        简单请求
        对于简单请求,CORS 按以下方式工作,

        1. 使用ORIGIN Header 向第三方站点发出请求。
        2. 在目标站点上,将ORIGIN值与允许的来源进行比较。
        3. 如果源是允许的,则资源被授予访问权限,否则被拒绝。

        复杂请求
        对于复杂请求,CORS 按以下方式工作,

        1. 在发送实际请求之前,会向目标站点发送飞行前请求。
        2. 飞行前请求通过OPTIONS HTTP 请求方法发送。
        3. 对飞行前请求的响应将包含允许的方法、有关目标站点的允许的来源详细信息。
        4. 根据这个响应判断目标站点是否可以返回请求的信息后,由浏览器发送实际的 GET/POST 请求。


        每当需要将资源共享给第三方站点时,应将该站点专门列入白名单,并使用Access-Control-Allow-Origin : https://sitename.com而不是通配符作为安全最佳实践。

        参考:https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS