为什么在浏览器中加载本地 HTML 文件时出现 CORS 错误？-js教程-PHP中文网

为什么在浏览器中加载本地 HTML 文件时出现 CORS 错误？

Mary-Kate Olsen

发布： 2024-12-13 17:44:12

原创

731 人浏览过

Why Do I Get a CORS Error When Loading Local HTML Files in My Browser?

加载 HTML 中的本地资源：CORS 错误

加载本地 HTML 文件时，可能会遇到错误“Origin null is not allowed by访问控制允许来源。”这是因为大多数浏览器都实施了同源策略 (SOP)。

SOP 限制跨源访问以保护用户的数据和隐私。在这种情况下，本地文件系统被视为与浏览器不同的“来源”，并且禁止直接从其加载文件。

错误原因

在提供的代码中，您尝试将“weather.xsl”文件加载到

中。使用 jQuery 的 load() 方法。然而，由于“weather.xsl”是本地文件，SOP 阻止浏览器访问它。

解决方案

不幸的是，使用 AJAX 直接加载本地资源由于 SOP，不允许请求。相反，请考虑以下解决方案：

安装本地 Web 服务器： 安装 Apache 或 Nginx 等 Web 服务器并将 HTML 文件托管在本地服务器上。这将为您提供一个通过 HTTP 访问文件的 URL，并且 SOP 将不适用。
使用 Chrome 扩展程序： 有一些 Chrome 扩展程序，例如“允许 CORS：访问控制- Allow-Origin”，可以暂时禁用本地文件的 SOP，允许您将 HTML 输出加载到
.
使用数据 URI： 将“weather.xsl”的 HTML 输出转换为数据 URI，并将其直接嵌入到 HTML 页面中。这可以避免从不同的来源加载文件。

注意：

请务必记住，这些解决方法可能并不适合所有情况，应该仅用于测试目的。对于生产环境，建议将文件部署到 Web 服务器。

以上是为什么在浏览器中加载本地 HTML 文件时出现 CORS 错误？的详细内容。更多信息请关注PHP中文网其他相关文章！