如何从0开始做一个vue2解决axios跨域

在 Vue.js 项目中，处理 Axios 跨域通常涉及到修改配置、使用 proxy 或者服务器设置 CORS。以下是基于 Vue CLI 项目从头开始设置 Axios 跨域的基本步骤：

1. **安装 axios**：
使用 npm 安装 axios：

   npm install axios --save

2. **创建 Axios 实例并配置全局拦截器**：
在 `src/main.js` 文件中，创建一个 Axios 实例并添加跨域请求前的默认配置：

   import axios from 'axios';

   const instance = axios.create({
     baseURL: process.env.BASE_URL, // API 的 base URL
     headers: {
       'Content-Type': 'application/json',
     },
     // 这里设置跨域支持，如果需要允许 JSONP，可以去掉下面这行
     withCredentials: true,
     transformRequest: [function(data) {
       // 对数据进行序列化，例如处理 FormData
       return data;
     }],
   });

   if (process.env.NODE_ENV === 'development') {
     // 开发环境下的代理设置，用于 dev-server
     instance.defaults.baseURL = '/api'; // 如果你的 API 在同一域名下，这里改为 '/api'
     instance.interceptors.request.use(
       config => {
         // 在发送请求之前做些什么
         // 在这里添加跨域处理
         if (!window.isServer && !config.crossDomain) {
           config.headers.common['X-Custom-Header'] = 'your-header-value';
           // 如果使用的是代理模式，可以加上：
           // config.devMeta = { withCredentials: true };
         }
         return config;
       },
       error => Promise.reject(error)
     );
   }

   // 将 axios 实例注入 Vue 中供全局使用
   Vue.prototype.$axios = instance;

3. **在组件中使用 Axios**：
现在你可以直接在 Vue 组件内使用 `$axios` 发送请求了，比如获取数据：

   export default {
     methods: {
       fetchData() {
         this.$axios.get('/users')
           .then(response => {
             console.log(response.data);
           })
           .catch(error => {
             console.error('Error fetching data', error);
           });
       },
     },
   };