axios请求解决跨域问题并将请求封装

最新推荐文章于 2025-04-24 16:50:33 发布

abc234ABC

最新推荐文章于 2025-04-24 16:50:33 发布

阅读量426

点赞数

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/abc234ABC/article/details/122982905

版权

本文介绍了在Vue.js项目中如何利用axios解决跨域问题，并详细讲解了如何封装axios请求，包括安装axios、创建api文件夹、编写http.js以及在index.js中定义封装的请求方法。通过这些步骤，开发者可以在应用中便捷地调用封装后的请求函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中载入axios

项目根目录下：

npm install axios

1、创建api文件夹

2、http.js中写入

import axios from 'axios'
import router from '../router'

axios.defaults.timeout = 5000 //  超时时间5秒
axios.defaults.withCredentials = true //  允许跨域

// 访问方式
// Content-type响应头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
// 基础url
axios.defaults.baseURL = 'http://localhost:8099'

// 响应拦截器
axios.interceptors.response.use(
  response => {
    // 如果response的status是200 说明访问到借口了，否则错误
    if (response.status === 200) {
      return Promise.resolve(response)
    } else {
      return Promise.reject(response)
    }
  },
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        case 401:// 未登录
          router.replace({
            path: '/',
            query: {
              redirect: router.currentRoute.fullPath
            }
          })
          break
        case 404://  未找到
          break
      }
      return Promise.reject(error.response)
    }
  }
)

// 封装get方法

export function get (url, params = {}) {
  return new Promise((resolve, reject) => {
    axios.get(url, { params: params })
      .then(respnse => {
        resolve(respnse.data)
      })
      .catch(err => {
        reject(err)
      })
  })
}

// 封装post方法
export function post (url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, data)
      .then(respnse => {
        resolve(respnse.data)
      })
      .catch(err => {
        reject(err)
      })
  })
}

3、在index.js文件中写入要封装的请求方法

import { get } from './http'
// 查询所有帖子
export const getAllCard = () => get('/card/findAll')

4、在实例中直接调用该方法

methods: {
    // 查询所有帖子
    getDate () {
      this.tableData = []
      getAllCard('/api/card/findAll').then((response) => {
        console.log(response.data)
        this.tableDate = response.data
      })
    }