相同的来源请求会导致“访问控制允许来源不匹配”错误，尽管来源当然匹配。注意：CSP策略带有“沙盒”

Question

当CORS及其网页的URL都使用完全相同的URL时，我仍然会在Firefox开发控制台中收到相同的错误消息。

浏览器控制台消息是：

Cross-Origin Request Blocked: \
  The Same Origin Policy disallows reading the remote resource \
  at https://egbert.net/fonts/fontawesome-webfont.woff2?v=4.7.0. \
  (Reason: CORS header ‘Access-Control-Allow-Origin’ does not \
  match ‘https://egbert.net’).

Access-Control-Allow-Origin: https://egbert.net
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range
Content-Security-Policy: \
    default-src 'none'; \
    base-uri 'none'; \
    script-src 'strict-dynamic'; \
    object-src 'none'; \
    style-src 'self'; \
    img-src https://egbert.net/favicon.ico https://egbert.net/images/ https://egbert.net/blog/articles/*/images/*.png data:; \
    media-src https://egbert.net/media/ data:; \
    frame-src https://egbert.net/frames/; \
    frame-ancestors 'self'; \
    worker-src 'self'; \
    child-src https://egbert.net/frames/; \
    font-src https://egbert.net/fonts/; \
    connect-src 'self' https://egbert.net/; \
    form-action 'none'; \
    require-trusted-types-for; \
    trusted-types template; \
    sandbox; \
    report-uri https://ssoseo1.report-uri.com/r/d/csp/enforce; \
    report-to endpoint-1; \
    upgrade-insecure-requests; \
    block-all-mixed-content;
Feature-Policy: accelerometer 'none'; camera 'none'; fullscreen 'self'; geolocation 'none'; gyroscope 'none'; magnetometer 'none'; microphone 'none'; midi 'none'; notifications 'none'; payment 'none'; push 'none'; sync-xhr 'none'; speaker 'none'; usb 'none'; vibrate 'none';
Referrer-Policy: no-referrer

HTML设置

  <link rel="stylesheet" href="https://egbert.net/css/m-dark.compiled.css">

 */@font-face {
 font-family:'FontAwesome';
 src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');
 src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
 url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
 url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
 url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
 url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
 font-weight:normal;
 font-style:normal
}

我确保所有字体文件都可以由同一浏览器在单独的选项卡中下载。

更奇怪的是，错误消息暗示了“远程资源”。它们是完全相同的URL。

没有加载插件，这是安全模式火狐v73.0.1。

当我替换相对路径（'../fonts'） 在具有绝对目录路径的 CSS 的 /@font-face 中。

当我将方案和域 （https://egbert.net/） 添加到 CSS 的 /@font-face 前面的绝对目录路径以获得完整的 URL 路径时，它没有任何变化。

这与以下问题不同:

• 为什么Postman没有得到“No'Access-Control-Allo-Origin'标头存在于
• 来源字体已被跨来源资源共享策略阻止加载
• Firefox“跨域请求被阻止”，尽管有标头
• 如何让跨域资源共享（CORS）后请求正常工作
• 跨域请求阻止：同源策略不允许读取远程资源
• 同源策略和CORS（跨源资源共享）
• Socket.IO：跨域请求阻塞：同源策略不允许读取远程资源
• 谷歌地图-跨域请求阻止：同源策略不允许读取远程资源
• 跨域请求被阻止Microsoft Azure函数

Answer 1

将CSP策略中的沙盒替换为沙盒允许同源将解决此问题。

解释：

问题描述的CORS问题最终是由浏览器将原始值设置为＜code＞null＜/code＞引起的。因此，尽管AccessControlAllowOrigin响应标头设置为通常预期的原始值（与浏览器地址栏中显示的URL匹配），但实际上并不匹配，因为浏览器已将原始值设置为null。

所以你最终会陷入一个看似矛盾的境地：文档似乎与它自己的来源不匹配。

https://stackoverflow.com/a/42242802/441757的答案概括了浏览器将原点设置为< code>null的所有情况。问题中案例的具体原因源于https://html.spec.whatwg.org/multipage/#attr-iframe-sandbox的要求，即如果设置了< code >沙箱:

内容被视为来自独特的来源，表单、脚本和各种可能令人讨厌的API被禁用，链接被阻止以其他浏览上下文为目标，插件被保护。＜code＞allow same origin＜/code＞关键字导致内容被视为来自其真实来源，而不是强制其成为唯一来源。

所以底线是：每当您指定沙盒时，在大多数情况下，您希望使用包含的允许同源关键字来指定它-以防止令人惊讶和难以排除的问题/副作用，例如问题中描述的CORS问题。