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

Question

我有一个 Vue.js 项目封装在 Electron 应用程序中。从我的组件之一 (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.

我试过使用代理无效。我知道关于 CORS 的类似问题已经在 SO 上被问到，它提供了不同的解决方案，但我是一个菜鸟，我需要比我遇到的那些更清晰的说明。

如果您需要更多信息，请告诉我。如果能帮助解决这个问题，我们将不胜感激。

提前致谢。

Answer 1

如果 JSON 文件应该与应用程序捆绑在一起，你不需要 Axios，你可以让 Webpack 加载它：

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

并在组件中使用：

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

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

How to load JSON in Vue CLI without CORS error

webpack

vue.js

electron

vuejs2

vue-cli