vue admin框架中怎么使用cors解决跨域问题

在 Vue Admin 框架中使用 CORS 解决跨域问题可以通过以下步骤：

1. 安装 axios：首先，确保你的项目中已经安装了 axios，可以使用以下命令进行安装：

npm install axios --save

2. 创建一个 axios 实例：在你的项目中创建一个独立的 axios 实例，用于发送跨域请求。在这个实例中，你可以设置一些默认的请求头和其他配置。

// src/utils/axios.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com', // 设置请求的基础URL
  timeout: 5000, // 设置请求超时时间
  withCredentials: true, // 允许携带跨域凭证（例如：cookies）
});

export default instance;

3. 在需要发送跨域请求的地方使用 axios 实例：在你的组件或其他地方，使用创建的 axios 实例来发送跨域请求。

// src/views/Example.vue
<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>

<script>
import axios from '@/utils/axios';

export default {
  methods: {
    fetchData() {
      axios.get('/data')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
};
</script>

在上述示例中，我们使用了创建的 axios 实例来发送 GET 请求，并访问了`/data`路径。由于我们已经在 axios 实例中设置了基础URL，实际发送的请求将是`https://api.example.com/data`。

请注意，在服务器端也需要设置相应的 CORS 头来允许跨域请求。你可以参考前面提到的服务器端设置响应头部分的示例代码来设置服务器端的 CORS 头。

以上是在 Vue Admin 框架中使用 CORS 解决跨域问题的一种方法，你可以根据实际需求和项目结构进行相应的调整。