58同城网站建设推广网站建设品牌策划案

学习自哔哩哔哩上的“刘老师教编程”，具体学习的网站为：11.Axios网络请求_哔哩哔哩_bilibili，以下是看课后做的笔记，仅供参考。

第一节Axios的使用

第二节与Vue整合

第三节跨域

第一节Axios的使用

在实际项目开发中，前端页面所需要的数据往往许哟啊从服务器端获取，这必然设计与服务器的通信，Axios是一个基于promise网络请求库，作用于node.js和浏览器中。Axios在浏览器端使用XMLHttpRequests发送网络请求，并能自动完成JSON数据的转换

安装 npm install axios

地址：https://www.axios-http.cn/

第二节与Vue整合

在实际项目开发中，几乎每个组件都会用到axios发起的数据请求，会与人道如下问题：每个组件中都需要导入axios，每次发送请求都需要填写完整的请求路径，可以通过全局配置的方式解决上述问题。

//配置请求根路径

axios.defaults.baseURL = 'http://api.com'

//将axios作为全局的自定义属性，每个组件可以在内部直接访问（Vue3）

app.config.globalProperties.$http = axios

//将axios作为全局的自定义属性，每个组件可以在内部直接访问（Vue2）

vue.prototype.$http = axios

第三节跨域

为什么会出现跨域问题？

为了保证浏览器的安全，不同的哭护短脚本在没有明确授权情况下，不能读写对方资源，称为同源策略，同源策略师浏览器安全的基石，是一种约定，它是浏览器最核心也是最基本的安全功能，所谓同源（即指在同一个域）就是两个页面具有相同的协议protocol，主机host和端口号port，当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域，此时无法读取非同源网页的Cookie，无法向非同源地址发送AJAX请求。