在vue中axios调用多个接口跨域问题

在Vue中使用axios调用多个接口跨域问题可以通过设置代理来解决。

1. 首先，在Vue项目根目录下找到config文件夹中的index.js文件。

2. 打开index.js文件，找到dev对象中的proxyTable选项。该选项允许我们配置代理。

3. 在proxyTable选项中添加以下代码：

proxyTable: {
  '/api1': {
    target: 'http://localhost:8000',
    changeOrigin: true,
    pathRewrite: {
      '^/api1': '/api1'
    }
  },
  '/api2': {
    target: 'http://localhost:8001',
    changeOrigin: true,
    pathRewrite: {
      '^/api2': '/api2'
    }
  }
}

此处使用了两个接口作为示例，一个是/api1，另一个是/api2。target参数指定了代理的目标地址，需要根据实际情况进行修改。changeOrigin参数用于配置是否跨域，默认为false，需要设置为true。pathRewrite参数用于重写请求路径，可以根据需要进行修改。

4. 保存并关闭index.js文件。

5. 在Vue组件中使用axios调用接口时，只需要将接口的路径改为对应的代理路径，例如：

axios.get('/api1/users')
  .then(response => {
    // 处理接口1的响应
  })
  .catch(error => {
    // 处理接口1的错误
  });

axios.get('/api2/posts')
  .then(response => {
    // 处理接口2的响应
  })
  .catch(error => {
    // 处理接口2的错误
  });

以上代码中，/api1和/api2就是代理路径，可以直接在axios中使用。

通过以上步骤，我们成功地解决了在Vue中使用axios调用多个接口跨域问题。注意，在开发环境下使用代理是安全的，但在生产环境要将代理改为实际的服务器地址。