vue使用axios解决跨域

// main.js 或其他入口文件

import Vue from 'vue';
import axios from 'axios';
import App from './App.vue';

// 创建一个 axios 实例
const service = axios.create({
  baseURL: 'https://api.example.com', // 设置基础 URL，替换为你的后端 API 地址
  timeout: 5000, // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么，例如添加 token
    config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response.data;
  },
  error => {
    // 对响应错误做点什么
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 处理未授权的错误
          break;
        case 403:
          // 处理禁止访问的错误
          break;
        case 404:
          // 处理未找到资源的错误
          break;
        case 500:
          // 处理服务器内部错误
          break;
        default:
          console.log(error.response.data);
      }
    }
    return Promise.reject(error);
  }
);

// 将 axios 实例挂载到 Vue 的原型上，这样可以在所有组件中使用 this.$http
Vue.prototype.$http = service;

new Vue({
  render: h => h(App),
}).$mount('#app');

// 示例：在组件中使用 axios 发送请求
// MyComponent.vue

export default {
  methods: {
    fetchData() {
      this.$http.get('/data')
        .then(response => {
          console.log(response); // 处理成功响应
        })
        .catch(error => {
          console.error(error); // 处理错误响应
        });
    }
  }
}

解释说明：

1. 创建 Axios 实例：

   • 使用 axios.create 方法创建一个新的 Axios 实例，并设置基础 URL 和请求超时时间。

2. 请求拦截器：

   • 在发送请求之前可以做一些处理，比如添加认证 Token。如果请求失败，可以通过 Promise.reject 返回错误。

3. 响应拦截器：

   • 对返回的响应数据进行处理，或者根据不同的 HTTP 状态码执行特定的操作。如果响应失败，也可以通过 Promise.reject 返回错误。

4. 挂载到 Vue 原型：

   • 将创建的 Axios 实例挂载到 Vue 的原型上 (Vue.prototype.$http)，这样可以在所有 Vue 组件中通过 this.$http 访问这个实例。

5. 在组件中使用：

   • 在 Vue 组件中可以直接使用 this.$http 来发送请求，并处理响应或错误。