跨域请求本地文件

问题描述 投票:0回答:6

我需要在浏览器中打开本地html文件。 javascript 工作正常,但 ajax 停止工作,并且 XMLHttpRequest 给出跨源错误。有没有办法从本地目录运行ajax。对我来说,它必须仅从本地文件运行。

谢谢

javascript xmlhttprequest cross-domain local-files
6个回答
14
投票

对于任何想知道的人,我必须在应用程序中运行服务器来提供 js 文件。似乎不运行服务器就不可能做到这一点。 如果有人知道其他方法,请告诉。


3
投票

在 Firefox 中允许此操作的最简单方法是导航至 about:config,查找

privacy.file_unique_origin
设置并切换它。现在它的值应该是“false”。

本质上,Firefox 过去将同一目录中的本地文件视为来自同一源,因此 CORS 很满意。在发现 CVE-2019-11730 后,这种行为发生了变化。

它在 Arch 上的 84.0.1 上运行良好。不在本地调试时请务必再次打开它。

来源


1
投票

如果您使用 VS Code,Live Server 扩展可能会对您有所帮助。它解决了我在编辑网页时遇到的跨域问题。

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer


0
投票

这是一个本地 HTML 文件,在执行 XMLHttpRequest 时会引发跨源错误。

<!DOCTYPE html>
<html>
    <body>
        <h2>Using the XMLHttpRequest Object</h2>
        <div id="demo">
            <button type="button" onclick="loadXMLDoc()">Change Content</button>
        </div>
        <script>
          function loadXMLDoc() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
              if (this.readyState == 4 && this.status == 200) {
                document.getElementById("demo").innerHTML =
                this.responseText;
              }
            };
            xhttp.open("GET", "https://itcorp.com/", true);
            xhttp.send();
          }
        </script>
    </body>
</html>

让它发挥作用

从本地计算机运行 ajax 请求的建议:

安装轻量级网络浏览器。无需安装网络服务器。

什么也没发生

使用现代浏览器时,开发者工具中的控制台显示错误: |错误| | - | |

Access to XMLHttpRequest at "https://itcorp.com/" from origin "null" has been blocked by CORS policy: No "Access-Control-Allow-Origin" header is present on the requested resource.
|

我们希望在浏览网页时使用保护有限的浏览器,而不是影响或禁用网络浏览器的保护机制。

如何选择网络浏览器

使用网站“AlternativeTo”我找到了 Google Chrome 网络浏览器的替代品:Falkon。

Falkon 适用于 Windows 和 Linux。

1.现代浏览器
在 Chrome 中打开本地 HTML 文件时:
可以单击按钮,但没有任何反应。
2.轻量级浏览器
在 Falkon 中打开本地 HTML 文件时:
点击按钮可以更改内容。

免责声明

从(邪恶)网站请求资源是危险的!所有现代浏览器都会阻止这些类型的请求。 2011 年,基于“同源”概念(RFC 6454)为其设计了规范。现代浏览器实现了保护功能,并将其作为一项策略强制提供给最终用户。

  • 例如谷歌浏览器:
    • 2010:引入 CORS 功能
    • 2020年:更严格的CORS政策开始逐步推出。
    • 2023 年:更严格的 CORS 政策现已成为标准。

作为开发人员,您可能希望使用轻量级浏览器来浏览本地文件。您应该小心不要使用此浏览器浏览互联网!

测试

  • 使用版本 3.1.0(2019 年 3 月)在 Falkon 中测试本地 HTML 文件。

-2
投票

如果您使用的是 Chrome,请尝试 此扩展

CORS 允许一个域上的 Web 应用程序向另一个域发出跨域 AJAX 请求。启用起来非常简单,只需要服务器发送一个响应标头。

此扩展的作用是添加到响应标头规则 -

Access-Control-Allow-Origin: *

您也可以通过发送响应标头来手动执行此操作。

对于简单的 CORS 请求,服务器只需在其响应中添加以下标头:

Access-Control-Allow-Origin: *

阅读了解更多信息。


-2
投票

如果您能够更改服务器代码,您可以尝试将字符串“null”添加到允许的来源。在 Chrome 中,如果从本地文件运行,它会将源发送为“null”。

这是 ASP.NET Core 中用于设置“null”源的示例:

services.AddCors(options =>
{
    options.AddPolicy("InsecurePolicy",
        builder => builder
            .WithOrigins("null")
            .AllowAnyMethod()
            .AllowAnyHeader()
            .AllowCredentials());
});

请注意,这是不推荐,但如果您在开发过程中只需要它,可能就足够了。

© www.soinside.com 2019 - 2024. All rights reserved.