访问被 CORS 策略阻止的 Web 清单
Access to web manifest blocked by CORS policy
我正在尝试在我的 PWA 中使用 manifest.json。我在目录中创建了一个简单的 index.html 文件。我在目录中还有一个 manifest.json 文件。
现在我像这样链接清单文件::
...
<link rel="manifest" href="manifest.json" />
...
现在，当我打开我的 index.html 文件时，控制台给出一个错误，指出由于同源策略的阻塞，它无法获取清单文件。我该如何解决？这可能是因为我正在使用文件协议打开我的 html。如果可能，请解释为什么会发生这种情况，以及为什么我可以用相同的方式加载 CSS 个文件。
CORS（跨源资源共享）是一种广泛使用的安全机制，仅允许同一域中的客户端浏览器应用程序访问资源或 API。受信任的 CORS 策略之外的任何内容都会被拒绝。对于本地网页，文件被认为不在您的来源之内。您的浏览器基本上认为您的硬盘位于不同的域中。否则，恶意脚本将能够通过简单地猜测访问路径轻松访问您的本地文件。
就本地 CSS 而言，它不被视为外部来源域。如果您尝试从其他域加载 css，您将得到同样的错误。
要修复本地文件的加载问题，您需要某种网络服务器或可以托管您的页面的精简版开发服务器。
可以托管静态文件的开发服务器示例之一：
如果您安装了 Python python -m SimpleHTTPServer 将在 http://localhost:8000/ 上启动一个服务器，在您启动它的任何文件夹中
跨源属性
我知道这个问题已经有一个可接受的答案，但是在我们的中央身份验证服务后面加载我们的 Web 清单文件时，我收到以下错误：
Access to manifest at 'https://logindev.domain.edu/cas/login?service=https://reactjs.int.domain.edu/sis/quickclassify/manifest.json' (redirected from 'https://reactjs.int.domain.edu/sis/quickclassify/manifest.json') from origin 'https://reactjs.int.domain.edu' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
我的解决方案是 add the crossorigin="use-credentials" attribute 到清单的 link 元素。
<link rel="manifest" href=”manifest.json” crossorigin="use-credentials" />
我正在尝试在我的 PWA 中使用 manifest.json。我在目录中创建了一个简单的 index.html 文件。我在目录中还有一个 manifest.json 文件。
现在我像这样链接清单文件::
...
<link rel="manifest" href="manifest.json" />
...
现在，当我打开我的 index.html 文件时，控制台给出一个错误，指出由于同源策略的阻塞，它无法获取清单文件。我该如何解决？这可能是因为我正在使用文件协议打开我的 html。如果可能，请解释为什么会发生这种情况，以及为什么我可以用相同的方式加载 CSS 个文件。
CORS（跨源资源共享）是一种广泛使用的安全机制，仅允许同一域中的客户端浏览器应用程序访问资源或 API。受信任的 CORS 策略之外的任何内容都会被拒绝。对于本地网页，文件被认为不在您的来源之内。您的浏览器基本上认为您的硬盘位于不同的域中。否则，恶意脚本将能够通过简单地猜测访问路径轻松访问您的本地文件。
就本地 CSS 而言，它不被视为外部来源域。如果您尝试从其他域加载 css，您将得到同样的错误。
要修复本地文件的加载问题，您需要某种网络服务器或可以托管您的页面的精简版开发服务器。 可以托管静态文件的开发服务器示例之一： 如果您安装了 Python python -m SimpleHTTPServer 将在 http://localhost:8000/ 上启动一个服务器，在您启动它的任何文件夹中
跨源属性
我知道这个问题已经有一个可接受的答案，但是在我们的中央身份验证服务后面加载我们的 Web 清单文件时，我收到以下错误：
Access to manifest at 'https://logindev.domain.edu/cas/login?service=https://reactjs.int.domain.edu/sis/quickclassify/manifest.json' (redirected from 'https://reactjs.int.domain.edu/sis/quickclassify/manifest.json') from origin 'https://reactjs.int.domain.edu' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
我的解决方案是 add the crossorigin="use-credentials" attribute 到清单的 link 元素。
<link rel="manifest" href=”manifest.json” crossorigin="use-credentials" />