访问控制允许来源多个来源域？

Posted 2023-03-03

【中文标题】访问控制允许来源多个来源域？

【英文标题】：Access-Control-Allow-Origin Multiple Origin Domains?

【发布时间】：2010-12-11 19:37:59

【问题描述】：

有没有办法使用Access-Control-Allow-Origin 标头允许多个跨域？

我知道*，但它太开放了。我真的想只允许几个域。

例如，如下所示：

Access-Control-Allow-Origin: http://domain1.example, http://domain2.example

我已经尝试了上面的代码，但它似乎在 Firefox 中不起作用。

是否可以指定多个域，还是我只能使用一个域？

【问题讨论】：

Rather than allowing a space-separated list of origins, (origin-list-or-null) is either a single origin or the string "null".（感谢@maxpolk）

使用最新的 Firefox，逗号分隔和空格分隔的域都不起作用。匹配域列表并将单个主机放在标头中仍然具有更好的安全性并且可以正常工作。

如果您正在为 HTTPS 解决这个问题，我找到了 solution。

重要提示：只允许Access-Control-Allow-Origin标头中的cretain域不意味着其他域无法触发此端点上的方法（例如 REST API 方法）。这只是意味着不允许的来源不能在 javascript 中使用结果（浏览器确保这一点）。为了限制对特定域的端点的访问，请使用服务器端请求过滤器，例如为不允许的域返回 HTTP 401。

当您想使用多个 URL 时，应始终附加 Vary: Origin 标头，请参阅：fetch.spec.whatwg.org/#cors-protocol-and-http-caches

【参考方案1】：

听起来推荐的方法是让您的服务器从客户端读取 Origin 标头，将其与您希望允许的域列表进行比较，如果匹配，则回显 Origin 的值将标头作为响应中的 Access-Control-Allow-Origin 标头返回给客户端。

使用.htaccess，您可以这样做：

# ----------------------------------------------------------------------
# Allow loading of external fonts
# ----------------------------------------------------------------------
<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
    <IfModule mod_headers.c>
        SetEnvIf Origin "http(s)?://(www\.)?(google.com|staging.google.com|development.google.com|otherdomain.example|dev02.otherdomain.example)$" AccessControlAllowOrigin=$0
        Header add Access-Control-Allow-Origin %AccessControlAllowOrigine env=AccessControlAllowOrigin
        Header merge Vary Origin
    </IfModule>
</FilesMatch>

【讨论】：

如何添加通配符子域，例如：*.example.com 或通配符端口，例如：localhost:*

对于任何想知道您可以使用(.+\.google.com) 而不是(google.com|staging.google.com)的人

如果没有匹配结果会如何？ Access-Control-Allow-Origin 的输出是什么？

那个正则表达式设计得不好；特别是，不应允许不安全的来源（使用http 方案），并且应转义DNS 标签分隔符（\. 而不是.）；否则，攻击者可以购买developmentzgoogle.com 域并从那里发起跨域攻击。

【参考方案2】：

您应该注意一个缺点：一旦您将文件外包到 CDN（或任何其他不允许脚本编写的服务器），或者如果您的文件缓存在代理上，则根据更改响应'Origin' 请求标头将不起作用。

【参考方案3】：

答案似乎是多次使用标题。也就是说，而不是发送

Access-Control-Allow-Origin: http://domain1.example, http://domain2.example, http://domain3.example

发送

Access-Control-Allow-Origin: http://domain1.example
Access-Control-Allow-Origin: http://domain2.example
Access-Control-Allow-Origin: http://domain3.example

在 Apache 上，您可以在 httpd.conf <VirtualHost> 部分或 .htaccess 文件中使用 mod_headers 和以下语法执行此操作：

Header add Access-Control-Allow-Origin "http://domain1.example"
Header add Access-Control-Allow-Origin "http://domain2.example"
Header add Access-Control-Allow-Origin "http://domain3.example"

诀窍是使用add 而不是append 作为第一个参数。

【讨论】：

看，当我这样做时，我做了“Header set ...”而不是“Header add ...” - 似乎对我有用。火狐 3.6.16

有一个变体似乎可行：***.com/questions/9466496/…

只花了两个小时试图解决与 CORS 相关的问题，结果发现这是因为多个 Access-Control-Allow-Origin 标头。我删除了多个 Access-Control-Allow-Origin 标头并开始工作。因此，尽管有票数，这不是正确的答案。使用此方法来支持多个域：***.com/a/1850482/123545

specs 明确表示多个值会导致 CORS 算法失败。所以这是不正确的。

也确认这是不正确的。使用它为四个域提供 CSS 时，我在 Chrome 的日志 “[...] 标头包含多个值 'aaa.com, bbb.com'，但只允许一个”中收到错误消息。将其定义为一个标头或多个标头或使用add 与set 都没有关系。它只是不起作用。

【参考方案4】：

我在使用 woff-fonts 时遇到了同样的问题，多个子域必须具有访问权限。为了允许子域，我在 httpd.conf 中添加了类似的内容：

SetEnvIf Origin "^(.*\.example\.com)$" ORIGIN_SUB_DOMAIN=$1
<FilesMatch "\.woff$">
    Header set Access-Control-Allow-Origin "%ORIGIN_SUB_DOMAINe" env=ORIGIN_SUB_DOMAIN
</FilesMatch>

对于多个域，您只需更改 SetEnvIf 中的正则表达式。

【讨论】：

为多个域提供一个示例很方便：^(https?:\/\/localhost:\d+)$|^(https?:\/\/.+\.yourdomain\.com)$ 这是实际操作...regex101.com/r/GZHTLB/1 这是疯狂的 gobbledegook，但 regex101 网站有助于破译这一切。

【参考方案5】：

我在 php 中使用的另一种解决方案：

$http_origin = $_SERVER['HTTP_ORIGIN'];

if ($http_origin == "http://www.domain1.com" || $http_origin == "http://www.domain2.com" || $http_origin == "http://www.domain3.com")
  
    header("Access-Control-Allow-Origin: $http_origin");

【参考方案6】：

这对我有用：

SetEnvIf Origin "^http(s)?://(.+\.)?(domain\.example|domain2\.example)$" origin_is=$0 
Header always set Access-Control-Allow-Origin %origin_ise env=origin_is

当输入.htaccess时，它肯定会工作。

【参考方案7】：

如果 Origin 标头与您的域与 nginx 匹配，以下是如何回显 Origin 标头，如果您想为多个子域提供字体，这很有用：

location /fonts 
    # this will echo back the origin header
    if ($http_origin ~ "example.org$") 
        add_header "Access-Control-Allow-Origin" $http_origin;
    

【参考方案8】：

也许我错了，但据我所知Access-Control-Allow-Origin 有一个"origin-list" 作为参数。

definition 和 origin-list 是：

origin            = "origin" ":" 1*WSP [ "null" / origin-list ]
origin-list       = serialized-origin *( 1*WSP serialized-origin )
serialized-origin = scheme "://" host [ ":" port ]
                  ; <scheme>, <host>, <port> productions from RFC3986

据此，我认为不同的起源是被承认的，应该空格分隔。

【参考方案9】：

这是我为 AJAX 请求的 PHP 应用程序所做的

$request_headers        = apache_request_headers();
$http_origin            = $request_headers['Origin'];
$allowed_http_origins   = array(
                            "http://myDumbDomain.example"   ,
                            "http://anotherDumbDomain.example"  ,
                            "http://localhost"  ,
                          );
if (in_array($http_origin, $allowed_http_origins))  
    @header("Access-Control-Allow-Origin: " . $http_origin);

如果我的服务器允许请求来源，则返回 $http_origin 本身作为 Access-Control-Allow-Origin 标头的值，而不是返回 * 通配符。

【讨论】：

应该检查$request_headers['Origin'];是否存在，否则任何直接请求都会触发E_NOTICE。

【参考方案10】：

并非所有浏览器都使用HTTP_ORIGIN。 How secure is HTTP_ORIGIN? 对我来说它在 FF 中是空的。 我有允许访问我的站点的站点通过站点 ID 发送，然后我检查我的数据库中具有该 ID 的记录并获取 SITE_URL 列值 (www.yoursite.com)。

header('Access-Control-Allow-Origin: http://'.$row['SITE_URL']);

即使通过有效的站点 ID 发送请求也需要来自与该站点 ID 关联的我的数据库中列出的域。

【参考方案11】：

用于匹配子域的 PHP 代码示例。

if( preg_match("/http:\/\/(.*?)\.yourdomain.example/", $_SERVER['HTTP_ORIGIN'], $matches )) 
        $theMatch = $matches[0];
        header('Access-Control-Allow-Origin: ' . $theMatch);

【参考方案12】：

Google 对serving ads over SSL 和grammar in the RFC itself 的支持回答似乎表明您可以用空格分隔网址。不确定这在不同浏览器中的支持程度如何。

【讨论】：

'serving ads over ssl' 链接到规范 w3.org/TR/cors/#access-control-allow-origin-response-header，其中添加了一条注释，“实际上，origin-list-or-null 生产受到更多限制。而不是允许使用空格分隔的列表来源，它要么是单一来源，要么是字符串“null”。

虽然注意细节很重要，但当规范说“在实践中”时，并不意味着这样做才有效。这意味着如果你这样做，你可能会遇到问题，因为大多数实施者要么不正确地实施规范，要么不完整地实施规范。该规范确实允许使用空格分隔的来源列表，您可以在 EBNF 中的origin-list 下查看：tools.ietf.org/html/rfc6454#section-7.1

【参考方案13】：

对于多个域，在您的.htaccess：

<IfModule mod_headers.c>
    SetEnvIf Origin "http(s)?://(www\.)?(domain1.example|domain2.example)$" AccessControlAllowOrigin=$0$1
    Header add Access-Control-Allow-Origin %AccessControlAllowOrigine env=AccessControlAllowOrigin
    Header set Access-Control-Allow-Credentials true
</IfModule>

【讨论】：

太棒了。帮助了我。

【参考方案14】：

如果您遇到字体问题，请使用：

<FilesMatch "\.(ttf|ttc|otf|eot|woff)$">
    <IfModule mod_headers>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

【参考方案15】：

为 Nginx 用户允许多个域的 CORS。我喜欢@marshall 的例子，尽管他的回答只匹配一个域。为了匹配域和子域的列表，这个正则表达式可以很容易地使用字体：

location ~* \.(?:ttf|ttc|otf|eot|woff|woff2)$ 
   if ( $http_origin ~* (https?://(.+\.)?(domain1|domain2|domain3)\.(?:me|co|com)$) ) 
      add_header "Access-Control-Allow-Origin" "$http_origin";
   

这只会回显与给定域列表匹配的“Access-Control-Allow-Origin”标头。

【讨论】：

警告：nginx.com/resources/wiki/start/topics/depth/ifisevil

【参考方案16】：

我很难为运行 HTTPS 的域进行设置，所以我想我会分享解决方案。我在 httpd.conf 文件中使用了以下指令：

    <FilesMatch "\.(ttf|otf|eot|woff)$">
            SetEnvIf Origin "^http(s)?://(.+\.)?example\.com$" AccessControlAllowOrigin=$0
            Header set Access-Control-Allow-Origin %AccessControlAllowOrigine env=AccessControlAllowOrigin
    </FilesMatch>

将example.com 更改为您的域名。在您的 httpd.conf 文件中将其添加到 <VirtualHost x.x.x.x:xx> 中。请注意，如果您的 VirtualHost 有端口后缀（例如 :80），那么该指令将不适用于 HTTPS，因此您还需要转到 /etc/apache2/sites-available/default-ssl 并在该文件中的 <VirtualHost _default_:443> 部分中添加相同的指令。

配置文件更新后，您需要在终端中运行以下命令：

a2enmod headers
sudo service apache2 reload

【讨论】：

我喜欢这个选项并将其与@George 的实现结合/修改。有时服务器没有可用的 a2enmod，所以你所要做的就是检查你的主 httpd.conf 以查看以下行：LoadModule headers_module modules/mod_headers.so 是否未注释。

我的源有一个端口号，所以我修改了正则表达式以包括：^http(s)?://(.+\.)?example\.com(:\d+)?$

【参考方案17】：

这是 apache 的扩展选项，其中包括一些最新和计划中的字体定义：

<FilesMatch "\.(ttf|otf|eot|woff|woff2|sfnt|svg)$">
    <IfModule mod_headers.c>
        SetEnvIf Origin "^http(s)?://(.+\.)?(domainname1|domainname2|domainname3)\.(?:com|net|org)$" AccessControlAllowOrigin=$0$1$2
        Header add Access-Control-Allow-Origin %AccessControlAllowOrigine env=AccessControlAllowOrigin
        Header set Access-Control-Allow-Credentials true
    </IfModule>
</FilesMatch>

【参考方案18】：

我们也可以在 Global.asax 文件中为 Asp.net 应用程序设置这个。

protected void Application_BeginRequest(object sender, EventArgs e)
    

    // enable CORS
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "https://www.youtube.com");

    

【参考方案19】：

对于安装了 URL Rewrite 2.0 模块的 IIS 7.5+，请参阅this SO answer

【参考方案20】：

这是基于 yesthatguy 的回答的 Java Web 应用解决方案。

我正在使用 Jersey REST 1.x

配置 web.xml 以了解 Jersey REST 和 CORSResponseFilter

<!-- Jersey REST config -->
<servlet>
  <servlet-name>JAX-RS Servlet</servlet-name>
  <servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class>
  <init-param>
    <param-name>com.sun.jersey.api.json.POJOMappingFeature</param-name>
    <param-value>true</param-value>
  </init-param>
  <init-param>
    <param-name>com.sun.jersey.spi.container.ContainerResponseFilters</param-name>
    <param-value>com.your.package.CORSResponseFilter</param-value>
  </init-param>
  <init-param>
    <param-name>com.sun.jersey.config.property.packages</param-name>
    <param-value>com.your.package</param-value>
  </init-param>
  <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
  <servlet-name>JAX-RS Servlet</servlet-name>
  <url-pattern>/ws/*</url-pattern>
</servlet-mapping>

这是 CORSResponseFilter 的代码

import com.sun.jersey.spi.container.ContainerRequest;
import com.sun.jersey.spi.container.ContainerResponse;
import com.sun.jersey.spi.container.ContainerResponseFilter;


public class CORSResponseFilter implements ContainerResponseFilter

    @Override
    public ContainerResponse filter(ContainerRequest request,
            ContainerResponse response) 
        
        String[] allowDomain = "http://localhost:9000","https://my.domain.example";
        Set<String> allowedOrigins = new HashSet<String>(Arrays.asList (allowDomain));                  
        
        String originHeader = request.getHeaderValue("Origin");
        
        if(allowedOrigins.contains(originHeader)) 
            response.getHttpHeaders().add("Access-Control-Allow-Origin", originHeader);
                        
            response.getHttpHeaders().add("Access-Control-Allow-Headers",
                    "origin, content-type, accept, authorization");
            response.getHttpHeaders().add("Access-Control-Allow-Credentials", "true");
            response.getHttpHeaders().add("Access-Control-Allow-Methods",
                    "GET, POST, PUT, DELETE, OPTIONS, HEAD");
        
        
        return response;
    

【参考方案21】：

如上所述，Access-Control-Allow-Origin 应该是唯一的，如果您使用 CDN（内容交付网络），Vary 应该设置为 Origin。

我的 Nginx 配置的相关部分：

if ($http_origin ~* (https?://.*\.mydomain.example(:[0-9]+)?)) 
  set $cors "true";

if ($cors = "true") 
  add_header 'Access-Control-Allow-Origin' "$http_origin";
  add_header 'X-Frame-Options' "ALLOW FROM $http_origin";
  add_header 'Access-Control-Allow-Credentials' 'true';
  add_header 'Vary' 'Origin';

【参考方案22】：

在 Django 中还有一个答案。要让一个视图允许来自多个域的 CORS，这是我的代码：

def my_view(request):
    if 'HTTP_ORIGIN' in request.META.keys() and request.META['HTTP_ORIGIN'] in ['http://allowed-unsecure-domain.com', 'https://allowed-secure-domain.com', ...]:
        response = my_view_response() # Create your desired response data: JsonResponse, HttpResponse...
        # Then add CORS headers for access from delivery
        response["Access-Control-Allow-Origin"] = request.META['HTTP_ORIGIN']
        response["Access-Control-Allow-Methods"] = "GET" # "GET, POST, PUT, DELETE, OPTIONS, HEAD"
        response["Access-Control-Max-Age"] = "1000"  
        response["Access-Control-Allow-Headers"] = "*"  
        return response

【参考方案23】：

为了方便一个 ASMX 服务的多域访问，我在 global.asax 文件中创建了这个函数：

protected void Application_BeginRequest(object sender, EventArgs e)

    string CORSServices = "/account.asmx|/account2.asmx";
    if (CORSServices.IndexOf(HttpContext.Current.Request.Url.AbsolutePath) > -1)
    
        string allowedDomains = "http://xxx.yyy.example|http://aaa.bbb.example";

        if(allowedDomains.IndexOf(HttpContext.Current.Request.Headers["Origin"]) > -1)
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", HttpContext.Current.Request.Headers["Origin"]);

        if(HttpContext.Current.Request.HttpMethod == "OPTIONS")
            HttpContext.Current.Response.End();
    

这也允许 CORS 处理 OPTIONS 动词。

【参考方案24】：

如果您像我一样尝试使用 CORS 使其工作的代码示例如此之多，值得一提的是，您必须先清除缓存以尝试它是否真的有效，类似于旧图像仍然存在时的问题，即使它在服务器上被删除（因为它仍然保存在您的缓存中）。

例如 CTRL + SHIFT + DEL 在谷歌浏览器中删除您的缓存。

在尝试了许多纯 .htaccess 解决方案后，这帮助我使用了这段代码，这似乎是唯一有效的（至少对我而言）：

    Header add Access-Control-Allow-Origin "http://google.com"
    Header add Access-Control-Allow-Headers "authorization, origin, user-token, x-requested-with, content-type"
    Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

    <FilesMatch "\.(ttf|otf|eot|woff)$">
        <IfModule mod_headers.c>
            SetEnvIf Origin "http(s)?://(www\.)?(google.com|staging.google.com|development.google.com|otherdomain.com|dev02.otherdomain.net)$" AccessControlAllowOrigin=$0
            Header add Access-Control-Allow-Origin %AccessControlAllowOrigine env=AccessControlAllowOrigin
        </IfModule>
    </FilesMatch>

另请注意，许多解决方案都说您必须输入Header set ...，但它是Header add ...。希望这可以帮助像我一样在几个小时内遇到同样问题的人。

【参考方案25】：

为了对 .NET 应用程序进行相当简单的复制/粘贴，我编写此代码是为了从 global.asax 文件中启用 CORS。此代码遵循当前接受的答案中给出的建议，将请求中给出的任何来源反映到响应中。这有效地实现了'*'而不使用它。

这样做的原因是它启用了多个其他 CORS 功能，包括发送将“withCredentials”属性设置为“true”的 AJAX XMLHttpRequest 的能力。

void Application_BeginRequest(object sender, EventArgs e)

    if (Request.HttpMethod == "OPTIONS")
    
        Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");
        Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
        Response.AddHeader("Access-Control-Max-Age", "1728000");
        Response.End();
    
    else
    
        Response.AddHeader("Access-Control-Allow-Credentials", "true");

        if (Request.Headers["Origin"] != null)
            Response.AddHeader("Access-Control-Allow-Origin" , Request.Headers["Origin"]);
        else
            Response.AddHeader("Access-Control-Allow-Origin" , "*");
    

【参考方案26】：

对于 ExpressJS 应用程序，您可以使用：

app.use((req, res, next) => 
    const corsWhitelist = [
        'https://domain1.example',
        'https://domain2.example',
        'https://domain3.example'
    ];
    if (corsWhitelist.indexOf(req.headers.origin) !== -1) 
        res.header('Access-Control-Allow-Origin', req.headers.origin);
        res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    

    next();
);

【参考方案27】：

下面的答案是针对 C# 的，但这个概念应该适用于所有不同的平台。

要允许来自 web api 的跨域请求，您需要允许对您的应用程序的选项请求并在控制器级别添加以下注释。

[EnableCors(UrlString,Header, Method)] 现在 origins 只能传递一个 s 字符串。因此，如果您想在请求中传递多个 URL，请将其作为逗号分隔值传递。

UrlString = "https://a.hello.com,https://b.hello.com"

【参考方案28】：

只能为 Access-Control-Allow-Origin 标头指定一个来源。但是您可以根据请求在响应中设置来源。也不要忘记设置 Vary 标头。在 PHP 中，我会执行以下操作：

    /**
     * Enable CORS for the passed origins.
     * Adds the Access-Control-Allow-Origin header to the response with the origin that matched the one in the request.
     * @param array $origins
     * @return string|null returns the matched origin or null
     */
    function allowOrigins($origins)
    
        $val = $_SERVER['HTTP_ORIGIN'] ?? null;
        if (in_array($val, $origins, true)) 
            header('Access-Control-Allow-Origin: '.$val);
            header('Vary: Origin');

            return $val;
        

        return null;
    

  if (allowOrigins(['http://localhost', 'https://localhost'])) 
      echo your response here, e.g. token
  

【参考方案29】：

PHP 代码：

$httpOrigin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : null;
if (in_array($httpOrigin, [
    'http://localhost:9000', // Co-worker dev-server
    'http://127.0.0.1:9001', // My dev-server
])) header("Access-Control-Allow-Origin: $httpOrigin");
header('Access-Control-Allow-Credentials: true');

【参考方案30】：

AWS Lambda/API 网关

有关如何在无服务器 AWS Lambda 和 API Gateway 上配置多个源的信息 - 尽管对于某些人认为应该非常简单的事情来说，这是一个相当大的解决方案 - 请参阅此处：

https://***.com/a/41708323/1624933

---

目前无法在 API Gateway 中配置多个来源，请参见此处：https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors-console.html），但建议（在上面的答案中）是：

检查浏览器发送的Origin标头 对照来源白名单检查它 如果匹配，则将传入的 Origin 作为 Access-Control-Allow-Origin 标头返回，否则返回占位符（默认来源）。

---

简单的解决方案显然是启用 ALL (*) 像这样：

exports.handler = async (event) => 
    const response = 
        statusCode: 200,
        headers: 
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Credentials" : true // Required for cookies, authorization headers with HTTPS
        ,
        body: JSON.stringify([

但在 API 网关端执行此操作可能会更好（请参阅上面的第二个链接）。

【讨论】：

Access-Control-Allow-Credentials: true 不允许使用通配符 Access-Control-Allow-Origin: *。改为设置特定的<origin>。

@Tom，是的，不知道为什么会在那里，我不记得了，但我可能是从 AWS 上添加的默认设置中复制了它？感谢您指出这一点。