Vue 中 axios 的使用和跨域问题的解决

一、内容：
1.Axios是一个基于 promise 的 HTTP库，类似于 jQuery 的 ajax，用于http请求。axios 并不是 vue 插件，所以不能使用 Vue.use()。
2.它既可以应用于浏览器端，也可以应用于node.js编写的服务端。
3.Axios具有以下特性：
　　(1)支持Promise API。
　　(2)拦截请求与响应，比如：在请求前添加授权和响应前做一些事情。
　　(3)转换请求数据和响应数据，比如：进行请求加密或者响应数据加密。
　　(4)取消请求。
　　(5)自动转换JSON数据。
　　(6)客户端支持防御XSRF(跨站点请求伪造)。
4.Promise API 是一种异步编程的解决方案，可以帮助管理异步操作，使得代码更易于理解和维护。
5.Promise 的基本流程包括以下几个步骤：
　　(1)创建一个新的 Promise 对象，并传入一个执行器函数作为参数。执行器函数接受两个参数：resolve 和 reject，分别用于在异步操作成功或失败时改变 Promise 的状态。
　　(2)在执行器函数中执行异步操作，如果操作成功，则调用 resolve 函数，将 Promise 状态变为已解决，并将操作结果作为参数传递出去；如果操作失败，则调用 reject 函数，将 Promise 状态变为已拒绝，并将错误信息作为参数传递出去。
　　(3)通过调用 Promise 对象的 then 方法或 catch 方法来处理异步操作的结果。then 方法用于处理操作成功的情况，catch 方法用于处理操作失败的情况。

二、安装：
执行命令：cd xxxx(项目目录)
执行命令：npm install axios

三、创建 network
在 src 目录下创建目录 network，在目录 network 下创建三个文件 http.js、api.js、request.js：

（1）request.js，引入 axios，创建 axios 实例 request，配置并暴露 request：

import axios from "axios";

const request = axios.create({
　　baseURL: '/api',
　　timeout: 2000
});

request.interceptors.request.use(config=>{
　　return config;
});

request.interceptors.response.use(response=>{
　　return response;
}, error=>{
　　return error;
});

export default request;

（2）http.js，引入 request 之后，创建 http 对象，封装对 request 的调用：

import request from "./request";

const http ={
　　get(url, params, headers){
　　　　const config ={
　　　　method: 'GET',
　　　　url:url,
　　　　params: params ? params : {},
　　　　headers: headers ? headers : {}
　　};
　　return request(config);
},

post(url, params, headers){
　　const config ={
　　　　method: 'POST',
　　　　url:url,
　　　　params: params ? params : {},
　　　　headers: headers ? headers : {}
　　};
　　return request(config);
}
};

export default http;

（3）api.js 用来统一管理接口 url,

import http from "./http";

const urls={
　　department:'api/Department'
};

export default {
　　getDepartments(){
　　　　return http.get(urls.department);
　　}
}

四、使用
（1）在组件中调用：

<script>
import api from '../network/api';

export default {
　　data(){
　　　　return {
　　　　　　formLabelWidth: '100px',
　　　　}
　　},
　　mounted(){
　　　　api.getDepartments()
　　　　.then(res=>{
　　　　　　　　if(res.status === 200){
　　　　　　　　if(res.data){
　　　　　　　　　　this.loading(1, res.data);
　　　　　　　　}
　　　　　　}
　　　　})
　　　　.catch(error=>{
　　　　　　console.log('AddUser.vue getDepartments:', error);
　　　　});
　　}
}
</script>

（2）解决开发时跨域问题
修改 vue.config.js 文件，添加如下配置：

//...
module.exports = defineConfig({
　　//...
　　devServer: {
　　　　proxy: {
　　　　　　'/api': {
　　　　　　　　target: 'http://localhost:8088',
　　　　　　　　changeOrigin: true,
　　　　　　　　pathRewrite: {
　　　　　　　　　　'^/api': ''
　　　　　　　　}
　　　　　　}
　　　　}
　　}
})

其中，target 用于配置服务器地址；pathRewrite 的配置是将请求中的/api 重写为空字符。

请求路径的组装过程如下：
A. api.js 中的 url（api/Department），与 request.js 中的 baseURL (/api)组合，生成：/api/api/Department
B. 请求路径“/api/api/Department”是以 “/api”开头，被代码服务 devServer 捕获，
C. 代理服务器重写请求路径“/api/api/Department” 为 “/api/Department” （将请求中的 /api 重写为空字符）
D. 代理服务器将请求路径与 target 结合，生成最终的请求路径：“http://localhost:8088/api/Department”
E. 代理服务器访问地址：“http://localhost:8088/api/Department”，拿到返回结果之后，将数据返回给 then 方法中的回调函数。

注意：request.js 中的 baseURL 不要配置以 http:// 开头的路径，需配置为 devServer.proxy 中的路径，否则代理服务器无法匹配到请求路径，将仍然报跨域错误。