在没有 Web 服务器的情况下发出 CORS AJAX 请求？答案

【问题标题】：Making a CORS AJAX request without a web server?在没有 Web 服务器的情况下发出 CORS AJAX 请求？
【发布时间】：2018-12-11 09:10:25
【问题描述】：

我正在开发一个网站，该网站是在连接到一堆学校计算机的 samba 共享上创建的。学校计算机就是这样，我无法访问或设置任何类型的网络服务器。我正在尝试为网站上的所有 HTML 文件制作页眉和页脚，但我无法通过指向相对文件路径的标准 jQuery ajax 请求来包含它。现在，代码是这样的

<!DOCTYPE html>

<html>

    <head>
        <meta charset="UTF-8">
        <html lang='en'> 

        <title>Test</title>

        <link rel="stylesheet" type="text/css" href="css/main.css">

        <script src="javascript/libs/jquery.js"></script>

        <div id="header"></div>

        <script> 
            $.ajaxSetup({
                crossOrigin: true
            });
          $.ajax({
            url: "file://./html-templates/header.html",
            data:{"id":header},
            type: 'GET',

            success: function(){
                console.log("Added header");
            }
        });
        </script> 

    </head>

    <body>

    </body>

</html>

头文件目前只有一些文本用于测试：

<h2>You have successfully imported the header</h2>

这会从 Firefox 63.0.3 返回此错误消息：

跨源请求被阻止：同源策略不允许读取位于 file:///html-templates/toolbar.html 的远程资源。（原因：CORS 请求不是 HTTP）。

有没有什么方法可以手动将单独文件中的 HTML 导入 HTML 文件，而无需网络服务器为我做这件事？

【问题讨论】：

您使用的是哪个操作系统？

标签： javascript jquery ajax import local

【解决方案1】：

linux用户可以运行这个命令

google-chrome --disable-web-security --user-data-dir="/var/tmp/Chrome dev session"

这将禁用所有安全性，您将顺利通过。

注意：请仅在本地系统中进行测试时执行此操作。

【讨论】：

【解决方案2】：

Chrome 出于安全考虑已禁用它，但幸运的是，如果您使用的是相对 URL，Firefox 可以做到这一点。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
            integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
            crossorigin="anonymous"></script>
    <script>
        $(function () {
            $.get("html-templates/header.html", function (data) {
                var headerText = $(data).find('h2').text();
                $('#header').text(headerText);
            });
        });
    </script>
</head>
<body>
    <div id="header"></div>
</body>
</html>

【讨论】：

【解决方案3】：

./ 的路径与你的脚本是同一目录，你可以

url: "html-templates/header.html",

【讨论】：