Axios与后端的连接以及跨域问题

---

前言

记录Axios的安装配置以及定义方法使用

---

一、Axios

Axios 是一个流行的基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境。它可以让你更方便地发起 HTTP 请求，并处理响应数据。
注意需要配置跨域问题，不然发送HTTP请求会发送不成功（放在最后）

二、使用步骤

1.引入库

npm install axios

2.配置文件

建立一个文件用来配置Axios 比如http=>index.ts

import axios, { AxiosInstance, AxiosRequestConfig, AxiosRequestHeaders, 
AxiosResponse, InternalAxiosRequestConfig } from 'axios';
import { ElMessage } from 'element-plus'
//axions请求配置 -- 这个是配置你发起HTTP请求的根路径以及超时时间
const config = {
    baseURL: '/api',
    timeout: 10000
}

//定义返回值类型---用来定义你后端返回的数据格式，后面会用到
export interface Result<T = any> {
    code: number;
    msg: string;
    data: T;
}
//配置Http类 ---里面是配置拦截器、取消请求、处理响应
class Http {
    //axions实例
    private instance: AxiosInstance;
    constructor(config: AxiosRequestConfig) {
        this.instance = axios.create(config)
        //定义拦截器
        this.interceptors()
    }
    //拦截器
    private interceptors() {
        //发送请求前对token进行处理
        this.instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
            let token = '';
            if (token) {
                config.headers!['token'] = token
                // (config.headers as AxiosRequestHeaders ).token = token
            }
            console.log(config)
            return config;
        }, (error: any) => {
            error.data = {}
            error.data.msg = '服务器异常'
            return error;
        });
        //收到回复后的处理
        this.instance.interceptors.response.use((res: AxiosResponse) => {
            if (res.data.code != 200) {
                ElMessage.error(res.data.msg || '服务器出错！')
                return Promise.reject(res.data.msg || '服务器出错')
            } else {
                return res.data
            }
        }, (error) => {
            console.log('进入错误')
            error.data = {};
            if (error && error.response) {
                switch (error.response.status) {
                    case 400:
                        error.data.msg = '错误请求';
                        ElMessage.error(error.data.msg)
                        break
                    case 401:
                        error.data.msg = '401错误请求';
                        ElMessage.error(error.data.msg)
                        break
                    case 402:
                        error.data.msg = '402错误请求';
                        ElMessage.error(error.data.msg)
                        break
                    case 403:
                        error.data.msg = '403错误请求';
                        ElMessage.error(error.data.msg)
                        break
                    case 407:
                        error.data.msg = '错误请求';
                        ElMessage.error(error.data.msg)
                        break
                    case 404:
                        error.data.msg = '404错误请求';
                        ElMessage.error(error.data.msg)
                        break
                    case 405:
                        error.data.msg = '405错误请求';
                        ElMessage.error(error.data.msg)
                        break
                    case 500:
                        error.data.msg = '500错误请求';
                        ElMessage.error(error.data.msg)
                        break
                }
            }
            return Promise.reject(error)
        })
    }
	/*下面就算具体的发起Http请求--规定了后端返回的是上面定义的Result接口格式的数据,传入url和数据参数发送对应请求方式的方法*/
     //    Get请求
    get<T = Result>(url: string, data?: object): Promise<T> {
        return this.instance.get(url, { data })
    }
    //    Post请求
    post<T = Result>(url: string, data?: object): Promise<T> {
        return this.instance.post(url, data)
    }
    //    Put请求
    put<T = Result>(url: string, data?: object): Promise<T> {
        return this.instance.put(url, data)
    }
    //    Delete请求
    delete<T = Result>(url: string): Promise<T> {
        return this.instance.delete(url)
    }
}
//将Http导出以便其他文件可以使用
export default new Http(config)

3.利用Axios定义方法

封装Axios为方法以便页面调用方法

//需要先导入Axios
import http from '@/http';
import { AdminModel } from './userModel' 
 type AdminModel = {
    username: string;
    password: string;
    nickName: string;
    phone: string;
    sex: string;
    status: string;
    isRoot: string;
}
//添加管理员方法
export const addAdminApi = (parm: AdminModel) => {
    return http.post("/api/sysUser", parm) 
    //第一个参数是后端的请求接口地址 第二个是需要传递的参数是自定义AdminModel对象格式的、发送的是post请求
}

4. 在显示页面调用封装Axios的方法

import { ElMessage, FormInstance } from 'element-plus'
import { addAdminApi } from '@/api/user/index'
//新增管理员
const onConfirm = () => {
    addRef.value?.validate(async (valid) => {
        if (valid) {
            // 提交数据
            const res = await addAdminApi(addAdminParm);  //使用方法发送Axios请求、addAdminParm是需要传递的参数。url已经提前和该方法绑定了
            if (res && res.code == 200) {  //判断后端返回的状态码是否是200 即添加成功则显示信息和退出弹框
                ElMessage.success("新增成功")
                dialog.visible = false
            }
        }
    }
    )
}

5.解决跨域问题

跨域问题指的是在 Web 开发中，当一个网页向不同的域、协议或端口发送请求时，会遇到浏览器的同源策略（Same-Origin Policy）限制，导致请求被浏览器拦截或限制。这是浏览器出于安全考虑而实施的策略，以防止恶意网站通过脚本等方式窃取用户信息或进行其他攻击。
这里介绍一种前端解决跨域的方式
在vite.cofig.ts配置文件的server中配置代理（proxy）解决浏览器的拦截限制

server: {
    host: '0.0.0.0',//Ip地址
    port: 8080,//端口号
    hmr: true,//热启动
    open: true,//自动打开浏览器
    //配置代理
  proxy: {
      '/api': {	//指定了要代理的请求路径前缀。这意味着所有以 /api 开头的请求都会被代理到指定的目标地址。
        target: 'http://localhost:8090',
        // target就是你要访问的目标地址，可以是基础地址，这样方便在这个网站的其他api口调用数据
        changeOrigin: true,//表示是否改变请求头中的 Origin 字段，如果设置为 true，则会把请求头中的 Origin 字段改为目标地址。
        rewrite: (path) => path.replace(/^\/api/, ''),
        //是对请求路径进行重写的选项，它指定了如何重写请求路径。在这里，path.replace(/^\/api/, '') 表示将请求路径中的 /api 前缀替换为空，这样就去掉了原始请求路径中的 /api 前缀，使得请求路径符合目标服务器的预期。
        // 要记得加rewrite这句
      },
    }, =
    
     },

总结

Axios 是一个功能强大、易于使用且具有丰富特性的 HTTP 客户端工具，适用于各种 Web 开发场景，能够帮助开发者轻松地处理 HTTP 请求和响应。