来自子域的 CORS 屏障

Question

我也在子域中使用我的 Web 应用程序，我为接口对象使用不同的子域。

这就是问题所在：CORS

由于 cors 障碍，未安装字体。

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://assets.example.com/fonts/simple-line-iconsc05f.ttf?thkwh4. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

申请：

https://ap.example.com

资产：

https://assets.example.com

我添加了Web应用程序的根目录，.htaccess文件：

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

此外，nginx.conf 文件：

server { 
...
location ~* \.(eot|ttf|woff|woff2)$ {
        add_header 'Access-Control-Allow-Origin' '*';
    }
    ...
}

尽管如此，我仍然卡在 cors 障碍中。

用缓存和不同浏览器试了很多次。结果没有改变。

Answer 1

你可以试试这个：

location / {   

        if ($request_filename ~* ^.*?/([^/]*?)$) {
            set $filename ; 
        }

        if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)|(jpg)|(png)|(css)|(js)$){
            add_header 'Access-Control-Allow-Origin' "*";
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Headers' 'User-Agent,Keep-Alive,Content-Type,X-Api-Token';
        }

    }

Answer 2

@Editor，虽然@Sahipsiz 的解决方案可能有效，但 CORS 是一个复杂的主题，并且根据我之前的评论，该解决方案在技术上是不正确的（即使它可能已经解决了您的症状，但潜在的问题仍然存在那里）...

首先，如果您的浏览器确定 CORS 正在运行，它将发送 Origin 请求 header，其中包含请求页面的完整域，例如：

Origin: https://ap.example.com

如果请求不包含原始请求header，则这不是 CORS 请求，您无需执行任何操作CORS-related.

如果您确定不需要支持将 cookie 传递 to/from assets 域，您可以简单地回复一个包含此响应的 CORS 请求 header:

Access-Control-Allow-Origin: *

但是，如果您确实需要 cookie 支持，则需要包含这两个响应 headers:

Access-Control-Allow-Origin: <value of Origin request header>
Access-Control-Allow-Credentials: true

所以在你的情况下，你会这样回应：

Access-Control-Allow-Origin: https://ap.example.com
Access-Control-Allow-Credentials: true

在某些情况下（这可能不适用于您，因为您只是检索字体），在发出主要 GET/POST/PUT/DELETE 请求之前，您的浏览器将首先发出额外的 'preflight' OPTIONS 请求 - 这基本上是浏览器 请求许可 来发出主要请求。 OPTIONS 请求包括一些 CORS-specific 请求 headers，你需要 return 一些 'matching' CORS 响应 headers 到这个 OPTIONS 请求（但没有响应 body）。如果您正确执行此操作，浏览器将发出主要请求。

对于那个 OPTIONS请求，你应该return以下CORS响应headers:

Access-Control-Allow-Origin: <value of Origin request header>
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: <value of Access-Control-Request-Method request header>
Access-Control-Allow-Headers: <value of Access-Control-Request-Headers request header>

这些响应 header 告诉浏览器您同意它即将发出的 GET/POST/DELETE/PUT 请求。

您还可以选择将以下响应 header 传递给 OPTIONS 请求（除了上面定义的四个之外）：

Access-Control-Max-Age: 86400

告诉浏览器缓存 OPTIONS 响应 headers - 这会阻止它每次都发出预检请求。

CORS 并不容易。

来自子域的 CORS 屏障

CORS Barrier from subdomain

.htaccess

nginx

access-control

cors