vue.js - 如何在没有CORS错误的情况下在Vue CLI中加载JSON

Question

我有一个包裹在Electron应用程序中的Vue.js项目。从我的组件之一(src/components/MoviesTable.vue)，我正在对本地JSON文件(public/data/multimedia.json)进行axios调用，如下所示:

axios.get('./data/multimedia.json').then(res => {
  this.movies = res.data.movies;
})

当我运行npm run serve服务Vue应用程序时，我没有遇到任何问题。但是，当我构建Electron应用程序时，收到错误消息:

Access to XMLHttpRequest at '.../multimedia-index-app/dist/data/multimedia.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

我尝试使用代理都无济于事。我知道在SO上也曾提出过类似的有关CORS的问题，这些问题提供了不同的解决方案，但是我是菜鸟，我需要的指导要比我遇到的更清晰。

如果您需要更多信息，请告诉我。解决该问题的任何帮助将不胜感激。

提前致谢。

Answer 1

如果JSON文件应与应用程序 bundle 在一起，则不需要Axios，可以让Webpack加载它:

import movies from './data/multimedia.json';

并在组件中使用它:

export default {
  data() {
    return {
      movies
    }
  }
}