Javascript импортирует / экспортирует проблему CORS

Question

Мне нужно создать экземпляр классов из определенного файла javascript, который содержит 3 класса, и вызвать методы этих классов из другого файла javascript. Классы в основном файле JavaScript похожи на:

function Class1(param1, param2) {
    this.openTag;
    this.closeTag;
    this.htmlTags;

    this.openTag = '<div id="' + this.elementId + '">';
    this.closeTag = '</div>';

    this.htmlTags = {
        sectionTitle: {
            openTag: '<h2 class="class1">',
            closeTag: '</h2>'
        },
        group: {
            openTag: '<div class="class2">',
            closeTag: '</div>'
        },
        table: {
            openTag: '<table class="class3">',
            closeTag: '</table>'
        }
    }
   ...
}

И такие методы, как:

 Class1.prototype.someName = function (index) {
    var outputHtml = '';

    var text = this.tableHeaders[index] || '';

    outputHtml += '<th>' + text + '</th>';

    return outputHtml;
}

Как я могу создать экземпляр этих классов и вызвать их из другого файла JavaScript или как я могуиспользовать их в HTML? Когда я пытаюсь выполнить импорт / экспорт ES6 или создать новый объект, ссылающийся на эти классы, он выдает мне эту ошибку:

Access to script at 'file:///Users/user/Desktop/project/someName.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

&

app.js:1 Uncaught SyntaxError: Cannot use import statement outside a module

Answer 1

Итак, я разобрался с моей проблемой. Я не использовал node.js. Я пытался вызвать функции из другого файла и отобразить их в файле HTML. Но политика CORS не позволяет мне их использовать. Я установил расширение Live Server в VS Code.

Он запускает сервер localhost, и проблема решается. Потому что тебе нужно http://. Поскольку при открытии файла HTML он загружает модель из file://, и это вызывает проблему. Вы можете просто запустить localhost, открыв файл HTML, щелкнув правой кнопкой мыши на редакторе и нажав Open with Live Server.

Я использовал такие экземпляры, как const abc = new Class(); и abc.someMethod();.

Важные замечания

Не забудьте добавить script теги к вашему HTML и убедитесь, что ваш основной script тег ниже других, таких как:

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 <script src="./readyFunctions.js"></script> <!-- Functions you will call -->
 <script src="./main.js"></script> <!-- js file where you call functions -->

Другое важное замечание: если вы получаете такую ​​ошибку, даже если вы сделали то, что я сказал, убедитесь, что у ваших script тегов нет type= "module".

. Вы также можете проверить этот пост для других видов решений. Надеюсь, это поможет:)

Answer 2

Модули javascript работают лучше всего, если ваш проект был создан с использованием npm, т.е. вы не загружаете файл скрипта внизу вашего index.html. И если вы загрузили скрипт внизу, возможно, вам придется сделать что-то вроде этого

<script type="module">

       import btn from './helper'

   </script>