返回

深入浅出！带你理解 Vue 配置 Axios 与服务端交互过程（跨域不烦扰）

前端

Vue 配置 Axios 与服务端交互的步骤

  1. 引入 Axios

    // 在 main.js 中引入 Axios
import axios from 'axios'
Vue.prototype.$axios = axios

  2. 配置 Axios

    // 在 src/apiconfig/index.js 中配置 Axios
import axios from 'axios'

// 创建 Axios 实例
const instance = axios.create({
  baseURL: 'https://example.com/api', // API 地址
  timeout: 10000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json', // 请求头
  },
})

// 添加请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 请求前做一些事情，如添加 token
    return config
  },
  (error) => {
    // 请求失败时做一些事情
    return Promise.reject(error)
  }
)

// 添加响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 响应成功时做一些事情，如处理数据
    return response
  },
  (error) => {
    // 响应失败时做一些事情，如处理错误
    return Promise.reject(error)
  }
)

// 导出 Axios 实例
export default instance

  3. 使用 Axios 发起请求

    // 在组件中使用 Axios 发起请求
import axios from 'src/apiconfig/index.js'

// 发送 GET 请求
axios.get('/users').then((response) => {
  console.log(response.data)
})

// 发送 POST 请求
axios.post('/users', { name: 'John Doe' }).then((response) => {
  console.log(response.data)
})

跨域处理

在进行服务端交互时，可能会遇到跨域问题。为了解决这个问题，可以使用 CORS（跨域资源共享）技术。

  1. 在服务端配置 CORS

    // 在服务器端代码中添加 CORS 头
res.header('Access-Control-Allow-Origin', '*')
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization')

  2. 在 Axios 中配置 CORS

    // 在 Axios 配置中设置 withCredentials 为 true
const instance = axios.create({
  withCredentials: true, // 允许携带 cookie
})

通过以上步骤，就可以在 Vue 中配置 Axios 并进行服务端交互，同时解决跨域问题。