在尝试从源站 http://qr.zhujiangbeer.com 访问 https://test-yx.zhujiangbeer.com 的某个 API 接口，遇到了跨源资源共享（CORS）的问题。请在vue3的配置文件中，列出完整的解决过程

在Vue 3项目中，如果你需要处理CORS问题，通常是在创建axios实例或者配置代理时设置。由于Vue CLI默认不会处理CORS，你需要在`src`目录下的`axios.js`或者全局的`vue.config.js`文件中添加CORS配置。这里给出两种常见的情况：

### 如果使用axios库：

**axios.js (推荐)**

import axios from 'axios';
import { createProxyMiddleware } from 'vue-cli-plugin-proxy';

const service = axios.create({
  baseURL: process.env.BASE_API, // api 的基础URL
  timeout: 5000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json', // 默认Content-Type
  },
  proxy: true,
});

if (process.env.NODE_ENV === 'production') {
  // 配置生产环境的代理
  const { createProxyMiddleware } = require('http-proxy-middleware');
  service.defaults.proxy = createProxyMiddleware(
    '/api',
    {
      target: 'https://test-yx.zhujiangbeer.com', // 目标API地址
      changeOrigin: true, // 允许跨域
      pathRewrite: { '^/api': '' }, // 路径重写，去掉'/api'
      onProxyRes(proxyRes) {
        // 设置允许的来源头
        proxyRes.headers['Access-Control-Allow-Origin'] = '*'; // 或者指定允许的源
        proxyRes.headers['Access-Control-Allow-Credentials'] = true;
        // 添加其他CORS头部...
      }
    }
  );
}

export default service;

### 如果使用vue.config.js:

**vue.config.js**

// vue.config.js
module.exports = {
  devServer: {
    proxy: [
      {
        path: '/api',
        target: 'https://test-yx.zhujiangbeer.com', // 目标API地址
        secure: false, // 这里可以忽略，因为我们不是在HTTPS环境下
        changeOrigin: true, // 允许跨域
        ws: true,
        headers: {
          'Access-Control-Allow-Origin': '*', // 允许所有来源
          'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
          'Access-Control-Allow-Headers': 'Content-Type, Authorization',
        },
      },
    ],
  },
};

在这两种情况下，CORS配置都已经允许了跨域访问，并且设置了允许的来源头。确保在部署到生产环境中时启用这个配置。