CORS 策略阻止访问 Web 清单

Question

我正在尝试在我的 PWA 中使用 manifest.json。我在目录中创建了一个简单的index.html 文件。我的目录中还有一个 manifest.json 文件。

现在我像这样链接清单文件：

...
<link rel="manifest" href="manifest.json" />
...

现在，当我打开 index.html 文件时，控制台会出现错误，指出由于同源策略的阻止，它无法获取清单文件。我该如何解决？这可能是因为我使用文件协议来打开我的html。如果可能的话，请解释为什么会发生这种情况，以及为什么我可以以相同的方式加载 CSS 文件。

Answer 1

跨源属性

我意识到这个问题已经有一个可接受的答案，但在我们的中央身份验证服务后面加载我们的网络清单文件时，我收到以下错误：

访问“https://logindev.domain.edu/cas/login?service=https://reactjs.int.domain.edu/sis/quickclassify/manifest.json”处的清单（重定向自“https://reactjs” .int.domain.edu/sis/quickclassify/manifest.json') 来自来源 'https://reactjs.int.domain.edu' 已被 CORS 策略阻止：没有 'Access-Control-Allow-Origin' 标头存在于所请求的资源上。

我的解决方案是将属性添加 crossorigin="use-credentials"到清单的链接元素中。

<link rel="manifest" href="manifest.json" crossorigin="use-credentials" />

Answer 2

CORS（跨源资源共享）是一种广泛使用的安全机制，仅允许同一域上的客户端浏览器应用程序访问资源或 API。任何超出可信 CORS 策略的内容都会被拒绝。对于本地网页，文件被视为位于您的来源之外。您的浏览器本质上认为您的硬盘驱动器位于不同的域中。否则，恶意脚本只需猜测访问路径就可以轻松访问您的本地文件。

就本地 CSS 而言，它不被视为外部源域。如果您尝试从其他域加载 css，您将收到相同的错误。

要修复本地文件的加载，您需要某种 Web 服务器或可以托管页面的弱化开发服务器。可以托管静态文件的开发服务器的一个示例：如果您安装了 Python，则 python -m SimpleHTTPServer 将在 http://localhost:8000/ 上启动服务器，无论您在哪个文件夹中启动它