项目的axios封装和跨域的代理

最新推荐文章于 2024-09-21 16:53:24 发布

藏剑于袖

最新推荐文章于 2024-09-21 16:53:24 发布

阅读量470

点赞数 2

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/yangpengze/article/details/122399477

版权

跨域

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        'target': 'http://120.53.31.103:84/api/app/',
        'changeOrigin': true,
        'pathRewrite': { '^/api' : '' },
      },
    }
  },
    css: {
        loaderOptions: {
          css: {},
          postcss: {
        plugins: [
          require("postcss-px2rem")({
            remUnit: 37.5
          })
        ]
      }
        }
    }
};

- axios的封装

创建一个http.js
编辑公共地址和请求拦截，响应拦截

import axios from "axios";
import { Toast } from 'vant'
const http=axios.create({
    baseURL:'/api',   //配置公用地址
    withCredentials:true,  //跨域是否携带token
    timeout:5000  //响应延迟时间
})
//设置请求拦截器
http.interceptors.request.use(config => {
  //可以设置token login 
   Toast.loading({
     message: '加载中...',
     forbidClick: true,
   });
  //  config.headers['Authorization'] = 'Bearer ' + JSON.parse(localStorage.getItem('token'))//可能导致请求不到数据
  return config
}, err => {
  console.log(err)
})
//设置响应拦截器
http.interceptors.response.use(res => {
   //可以设置响应的状态码，关闭login
   Toast.clear()
  return res = res.data //拦截处理响应结果，直接返回需要的数据
}, err => {
  console.log(err)
})

export default http

封装api统一管理配置需要的东西

import api from "./http";
//这里引入http在这里可以接收请求地址请求方式以及参数
export default function requests({method='get',url='',data={},params={}}){
    //把api返回出去
    return api({
        method,
        url,
        data,
        params
    })
}

创建req.js封装所有的接口请求

//引入api这里是所有请求的管理
import req from './api'
//home页面请求在首页可以import引入gethome方法获取数据后面可以传递地址参数请求方式
//测试
export const test = (data) => req({ url: 'recommend/appIndex', data })
// 获取短信验证码
export const GetvCode = (data) => req({ url: 'smsCode', method: 'post', data })
// 登录
export const getLogin = (data) => req({ url: 'login', method: 'post', data })

// 请求名师的接口
export const GitMing = () => req({ url: 'recommend/appIndex' })

// 约课获取列表
export const getAppoint = () => req({ url: 'teacher/search/attrs' })
//获取轮播图数据
export const getSwipe = () => req({ url: 'banner' })
// 找回密码
export const getPwd = (data) => req({url:'password',method:'post',data})