如何在没有 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 应用程序时，我收到错误：

CORS 策略已阻止从源“null”访问位于“.../multimedia-index-app/dist/data/multimedia.json”的 XMLHttpRequest：跨源请求仅支持协议方案：http、数据，铬，铬扩展，https。

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

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

提前致谢。

Answer 1

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

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

并在组件中使用：

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