解决axios在请求本地json时跨域报错问题

一、整体流程

为了解决axios在请求本地json时跨域报错问题，我们需要采取以下步骤：

步骤 操作
1 在项目根目录下创建一个mock文件夹
2 在mock文件夹下创建一个json文件，命名为data.json
3 安装axios和http-proxy-middleware插件
4 在项目根目录下创建一个setupProxy.js文件
5 修改axios请求，指向本地json文件

二、具体操作步骤

1. 创建mock文件夹

在项目的根目录下创建一个mock文件夹，用于存放本地json文件。

2. 创建json文件

在mock文件夹下创建一个名为data.json的json文件，用于模拟后端返回的数据。

3. 安装axios和http-proxy-middleware

使用以下命令安装axios和http-proxy-middleware插件：

npm install axios http-proxy-middleware --save

4. 创建setupProxy.js文件

在项目的根目录下创建一个setupProxy.js文件，用于配置代理。

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:3000',
      changeOrigin: true,
    })
  );
};

5. 修改axios请求

在需要请求本地json文件的地方，修改axios请求的url，指向本地json文件路径。

import axios from 'axios';

axios.get('/api/data.json')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

三、类图

classDiagram
    class axios {
        + get(url)
    }
    class http-proxy-middleware {
        + createProxyMiddleware(options)
    }
    class setupProxy.js {
        + module.exports(app)
    }

    axios --> http-proxy-middleware
    setupProxy.js --> http-proxy-middleware

通过以上步骤，你就可以解决axios在请求本地json时跨域报错的问题。希望对你有所帮助！