面试题：Vue中Axios的配置优化问题

Question

在一个复杂的Vue项目中，Axios需要进行全局配置，比如设置基础URL、请求超时时间等，并且要在不同的业务模块中可以灵活调整部分配置。请描述如何实现这种配置方式，以及在跨域请求时，Axios通常需要配合哪些前端技术进行处理，为什么？

Answer 1

1. Axios全局配置及灵活调整配置的实现方式

1. 全局配置 在Vue项目的入口文件（通常是main.js）中进行Axios的全局配置。首先引入Axios，然后使用axios.defaults来设置全局配置。例如：

import axios from 'axios'
import Vue from 'vue'

// 设置基础URL
axios.defaults.baseURL = 'https://api.example.com'
// 设置请求超时时间
axios.defaults.timeout = 5000

Vue.prototype.$axios = axios

2. 灵活调整部分配置 为了在不同业务模块中灵活调整部分配置，可以在具体的请求中传入配置对象。Axios的request方法接受一个配置对象，该对象会合并到全局配置上。例如：

// 在某个业务模块中
this.$axios({
  url: '/specific-api',
  method: 'get',
  // 临时调整超时时间
  timeout: 3000
})

还可以创建多个Axios实例，每个实例有独立的配置。例如：

import axios from 'axios'

// 创建一个新的Axios实例
const customAxios = axios.create({
  baseURL: 'https://another-api.example.com',
  timeout: 8000
})

export default customAxios

在业务模块中使用这个新实例时，就会使用其独立的配置。

2. 跨域请求时Axios配合的前端技术及原因

1. CORS（跨域资源共享）
   • 原因：CORS是一种机制，它使用额外的HTTP头来告诉浏览器让运行在一个origin（domain）上的Web应用被准许访问来自不同源服务器上的指定的资源。如果服务器端支持CORS，Axios发起的跨域请求就能顺利进行。在服务器端配置CORS头（如Access - Control - Allow - Origin等），前端Axios无需额外复杂配置，就能实现跨域请求。例如，服务器端（以Node.js Express为例）可以这样配置：

const express = require('express')
const app = express()

app.use((req, res, next) => {
  res.setHeader('Access - Control - Allow - Origin', '*')
  res.setHeader('Access - Control - Allow - Methods', 'GET, POST, PUT, DELETE')
  res.setHeader('Access - Control - Allow - Headers', 'Content - Type')
  next()
})

2. 代理（Proxy）
   • 原因：在开发环境中，由于浏览器的同源策略限制，直接跨域请求会失败。使用代理可以将跨域请求转发到目标服务器，从而绕过浏览器的限制。在Vue项目中，可以通过在vue.config.js文件中配置代理来实现。例如：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

这样，当Axios请求以/api开头的URL时，会被代理到https://api.example.com，在开发环境中实现了跨域请求。