Делаете запрос CORS AJAX без веб-сервера? - PullRequest
0 голосов
/ 11 декабря 2018

Я работаю над сайтом, созданным на общем ресурсе самбы, подключенном к куче школьных компьютеров.Школьные компьютеры, какими бы они ни были, у меня нет доступа или способа настройки какого-либо веб-сервера.Я пытаюсь создать верхний и нижний колонтитулы для всех файлов 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:

Блокирован перекрестный запрос: одна и та же политика происхождения запрещает чтение удаленного ресурса в файле: ///html-templates/toolbar.html.(Причина: запрос CORS, а не HTTP).

Можно ли каким-либо образом импортировать HTML из отдельных файлов в файл HTML вручную, не делая это для меня на веб-сервере?

Ответы [ 3 ]

0 голосов
/ 11 декабря 2018

Chrome отключил его для безопасности, но, к счастью для вас, Firefox может сделать это, если вы используете относительный URL.

<!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>
0 голосов
/ 11 декабря 2018

путь ./ - это та же директория, что и ваш скрипт, вы можете просто

url: "html-templates/header.html",
0 голосов
/ 11 декабря 2018

Для пользователей linux вы можете запустить эту команду

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

, которая отключит всю безопасность, и вы пропустите без проблем.

ПРИМЕЧАНИЕ. Пожалуйста, делайте это только при тестировании влокальные системы.

...