axios基本使用及跨域问题详解

前端请求自然也发展迅速，从原生的XHR到jquery ajax，再到现在的axios和fetch。axios（ https://axios-http.com/zh/ ）是Vue推荐的http库，这个还是要了解一点的。

安装

$ npm install axios

基本使用的例子

1、在main.js中（肯定得创一个Vue脚手架的工程）import

import axios from 'axios'

2、使用axios
❌错误示范

import axios from 'axios'
const app = createApp(App)
app.use(axios).mount('#app')

这种写法不支持, 因为 axios 是第三方库, 不是vue的插件

✅正确示范！！！
在原型上进行绑定, 直接写原型链

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'const app = createApp(App)
app.config.globalProperties.$axios = axiosapp.use(router).mount('#app')

3、简单发起一个请求
注意：这是高德地图提供的一个天气接口，高德接口已经把跨域的问题解决好了，允许跨域

//高德接口已经把跨域的问题解决好了，允许跨域
this.$axios({url:`https://restapi.amap.com/v3/weather/weatherInfo?key=5737f6640c7a33f8fb22a952b298946b&city=340104`,}).then((res) => {console.log(res)}).catch((error)=>{console.log(error);});

封装axios

1、直接用axios不好吗？为什么要封装？
说直白一点，就是接口不同时改个域名就行了、可以统一管理请求、条例清晰、好维护
2、怎么封装
要注意res是浏览器对请求响应的处理结果，res.status是http状态码，这是超文本传输协议响应状态的3位数字代码，在RFC 2616中规定好了，只有在data里面的status才能自己规定判断

import axios from "axios"//创建一个axios对象
const http = axios.create({timeout: 5000
})//设置请求的拦截器
http.interceptors.request.use(config => {// 在这里，可以配置请求头、token等信息return config
}, error => {console.log(error);return Promise.reject(error)
})//设置响应的拦截器
http.interceptors.response.use(res => {//返回的响应数据/*** res是浏览器对请求响应的处理结果，res.status是http状态码，* 这是超文本传输协议响应状态的3位数字代码，在RFC 2616中规定好了* 只有在data里面的status才能自己规定判断*/console.log(res)console.log(res.data)const data = res.dataif (res.status == 200) {if (data.status == 1 || data.status == 1000) {return Promise.resolve(data)} else {console.log(data)return Promise.reject(data)}}
}, error => {if (error.response.status) {switch (error.response.status) {case 404:alert("请求路径找不到！")break;case 500:alert("服务器内部错误！")break;default:break;}}return Promise.reject(error)
})export default http

3、封装完怎么用？
同样，把封装好的axios实例加到原型上

import request from '@/utils/request'
const app = createApp(App)
app.config.globalProperties.$request = request
app.mount('#app')

之后请求

  //自己封装的axios，这个接口同样直接允许跨域this.$request({url:`http://wthrcdn.etouch.cn/weather_mini?city=%E5%BC%8B%E6%B1%9F`,}).then((res) => {console.log(res);}).catch((error)=>{console.log(error);})

有关跨域的问题

1、什么是同源策略？
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指协议+域名+端口三者相同，即便两个不同的域名指向同一个地址，也非同源。

2、什么是跨域？
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

比如我现在有一个自己写的接口

http://localhost/allPHPcode/starbuckBackend/menu.php

它返回menu的json数据

现在向它发起请求

//自己写的一个接口，不允许跨域this.$axios({url:`localhost/allPHPcode/starbuckBackend/menu.php`}).then((res) => {console.log(res);}).catch((error) => {console.log(error);})

报错

端口号不同，存在跨域
3、解决办法一——允许跨域
查看请求自己写的menu接口时的网络面板

查看请求天气接口时的网络面板

对比就可以发现，如果要允许跨域，在php顶部加上以下header即可

// 跨域问题处理
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE");
header('Access-Control-Allow-Headers:x-requested-with,content-type');

添加header后再次请求

4、解决办法二——代理
通过中间件来解决跨域问题，浏览器有跨域限制，但是服务器没有跨域限制，所以中间件其实就是服务器（服务器对数据进行了转发而已）

首先在vue.config.js文件里配置一下

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,devServer:{proxy:{'/localhost':{                     //这个就是的标识，当接口用 localhost 开头才用代理target:'http://localhost',       //这是代理到哪里pathRewrite:{ '^/localhost':''}, //这个是路径重写，比如代理的标识是 localhost，但是要请求的路径里没有 localhost 这个字符串，所以用pathRwrite把  localhost  换成空字符串，也就是删掉，之后再拼到target上就合适了changeOrigin:true                //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题}}}
})

再次发起请求，问题解决

关于pathRewrite可以看这两篇文章
[1]:https://juejin.cn/post/7041441723238580238
[2]:https://www.cnblogs.com/hanguidong/p/9460495.html

以上例子的源码：https://github.com/AnnGreen1/axios-demo