Axios封装及跨域

目录

1、Axios分装

2、跨域

---

1、Axios分装

在src文件夹下创建request文件夹

/request/http.js

import axios from 'axios'
import Qs from 'qs'

// 设置默认前缀
axios.defaults.baseURL = "https://www.fastmock.site/mock/3ce623ab09192f4db744f0fcb338a6cf/home"

// 封装get请求
export const get = (url, params) => {
  return new Promise((resolve, reject) => {
    axios.get(url, { params }).then(res => {
      resolve(res.data)
      // console.log(res, "http.js")
    }).catch(err => {
      reject(err)
    })
  })
}

// 分装post请求
export const post = (url, params) => {
  return new Promise((resolve, reject) => {
    axios.post(url, Qs.stringify(params)).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}

// 请求拦截器
axios.interceptors.request.use(config => {
  // 登录拦截、权限校验
  // 添加token【令牌、唯一标识】
  // 自动把token这个参数添加到请求头中
  // 判断你请求的接口是不是登录和注册
  config.headers["Authorization"] = "fniaogoanogagmagagagagasgafjaojfg";


  return config
})

// 响应拦截器
axios.interceptors.response.use(config => {

  return config
})

/requerst/api  调用接口

import { get } from './http'

export const indexList = data => get('/api/index', data)

// 首页banner
export const indexBanner = data => get('/api/banner', data)

在页面使用接口

import { indexHou } from "../../request/api";
export default{

    created(){
         indexHou().then((res) => {
         console.log(res.data);
      });
    }

}

2、跨域

在根目录文件下创建vue.config.js

module.exports = {
  devServer:{
      proxy:{
          "/aip":{
              target:"http://192.168.150.29:3000", // 目标地址
              changeOrigin:true
         }
     }
 }
}

使用proxy解决跨域的时候，要把axios封装的默认前缀注释掉