Почему такая ошибка в консоле при запуске проекта просто с index.html

Question

Проблема заключается в том что когда запускаю с лайв сервера в vs code код работает нормально без проблем, когда хочу запустить просто кликнув на index.html в консоле в браузере такая ошибка: Access to script at 'file:///D:/Slavko%20Programming%20Folder/flashcard-scanner/card-editor/assets/js/app.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https. Помогите исправить ошибку пожалуста app.js:1 Failed to load resource: net::ERR_FAILED

// start vue app
const App = {
  data() {
    return {
      title: "Card Editor",
      originalArr: [], // originalArr - original data
      copiedArr: [] // copiedArr - copied data from the original array
    }
  },
  mounted() {
  },
  methods: {
    // push to the original array
    async originalPush() {
      let file = document.querySelector("#file").files[0]
      let data

      data = await this.loadFile(file)
      this.originalArr.push(...JSON.parse(data))
      this.copyOriginal()
    },
    // the method that loads a file 
    loadFile(file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader()

        reader.onload = function(event) {
          let data = event.target.result
          resolve(data)
        }

        reader.readAsText(file)
      })
    },
    // copyOriginal method:
    copyOriginal() {
      this.copiedArr = JSON.parse(JSON.stringify(this.originalArr))
    },
    // change item id
    changeItemId(item, e) {
      item.id = Number(e.target.value)
      e.target.value = ""
    },
    // change item en topic
    changeItemEnTopic(item, e) {
      item.languages.en.topic = e.target.value
      e.target.value = ""
    },
    // change en words
    changeEnWords(item, e) {
      let target = e.target.value
      item.languages.en.words = target.split(",")
      e.target.value = ""
    },
    // change item uk topic
    changeItemUkTopic(item, e) {
      item.languages.uk.topic = e.target.value
      e.target.value = ""
    },
    // change en words
    changeUkWords(item, e) {
      let target = e.target.value
      item.languages.uk.words = target.split(",")
      e.target.value = ""
    },
    // download function
    download(fileName, content) {
      let element = document.createElement("a")
      element.style.display = "none"

      element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(content))

      element.setAttribute("download", fileName)
      document.body.appendChild(element)
      element.click()
      document.body.removeChild(element)
    },
    // Here, when the user clicks the download button, start download
    downloadFile() {
      // let content = JSON.stringify(this.copied)
      let content = JSON.stringify(this.copiedArr)
      let fileName = "test.json"
      this.download(fileName, content)
    }
  }
}

Vue.createApp(App).mount("#container")

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card Review</title>
  <!-- css -->
  <link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
  <!-- container -->
  <div id="container" class="container">
    
    <h1 class="title"> {{ title }} </h1>

    <input type="file" id="file">
    <button id="load" @click="originalPush">Load JSON File</button>
    <button id="download" @click="downloadFile">Download JSON File</button>
    <!-- card__inner -->
    <div class="card__inner">
      <!-- card__item -->
      <div class="card__item" v-for="(item, idx) in copiedArr" :key="item.id">
        <!-- card front -->
        <div class="card__front">
          <div class="card__header">
            <span> {{ item.id}} <div class="div"><input type="text" class="input" @keyup.enter="changeItemId(item, $event)"></div> </span> 
            <span> {{ item.languages.en.topic }} <div class="div"><input type="text" class="input" @keyup.enter="changeItemEnTopic(item, $event)"></div> </span>
          </div>

          <div class="card__body">
            <div class="card__content">
              <span class="card__word" v-for="word in item.languages.en.words"> {{ word }} </span>
            </div>
            <input type="text" @keyup.enter="changeEnWords(item, $event)">
          </div>

        </div> <!-- card__front -->
        <!-- card back -->
        <div class="card__back">
          <div class="card__header back">
            <span> {{ item.id }}</span> 
            <span> {{ item.languages.uk.topic}} <div class="div"><input type="text" class="input" @keyup.enter="changeItemUkTopic(item, $event)"></div> </span>
          </div>

          <div class="card__body">
            <div class="card__content">
              <span class="card__word" v-for="word in item.languages.uk.words"> {{ word }} </span>
            </div>
            <input type="text" @keyup.enter="changeUkWords(item, $event)">
          </div>

        </div> <!-- /back -->
      </div> <!-- /card__item -->
    </div> <!-- /card__inner -->
    
  </div> <!-- /container -->


  <!-- vue3 cdn -->
  <script src="https://unpkg.com/vue@next"></script>
  <!-- javascript -->
  <script type="module" src="./assets/js/app.js"></script>
</body>
</html>

БЛОГ НА HUSL

Почему такая ошибка в консоле при запуске проекта просто с index.html

Ответы (0 шт):