一、Axios简介
Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js 环境。它是一个流行的 JavaScript 库，用于发起 HTTP 请求，如 GET、POST、DELETE 等。Axios 提供了易于使用的 API，支持请求和响应的拦截、转换数据格式、客户端支持防御 XSRF（跨站请求伪造）等功能。
以下是 Axios 的一些主要特点：
-
从浏览器中创建 XMLHttpRequests：
允许从前端 JavaScript 代码中发送异步HTTP请求。 -
从 node.js 发出 http 请求：
在服务器端环境中，Axios 可以用于发送 HTTP 请求。 -
支持 Promise API：
Axios 提供了基于 Promise 的接口，使得异步请求的处理更加方便。 -
转换请求和响应数据：
自动转换 JSON 数据结构，也可以自定义转换函数。 -
客户端支持防御 XSRF：
Axios 可以配置来防御跨站请求伪造攻击。 -
拦截请求和响应：
允许在请求发送前后或响应返回前后执行拦截操作。 -
取消请求：
提供了取消请求的能力，可以用于防止不必要的网络请求。 -
自动转换 JSON：
Axios 会自动将请求和响应数据转换为 JSON。 -
客户端支持防御 XSRF：
Axios 可以配置来防御跨站请求伪造攻击。
以下是 Axios 的基本使用示例：
// 发送 GET 请求
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error during fetching:', error);
});
// 发送 POST 请求
axios.post('https://api.example.com/data', {
title: 'Example Title',
body: 'This is a new post.',
userId: 1
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error during posting:', error);
});
// 使用 async/await
async function fetchData() {
try {
const response = await axios.get('https://api.example.com/data');
console.log(response.data);
} catch (error) {
console.error('Error during fetching:', error);
}
}要使用 Axios，你可以通过 npm 或 yarn 来安装它：
npm install axios --save或者
bash
yarn add axios然后，在你的 JavaScript 代码中引入 Axios 并使用它发起请求。
二、Axios支持的数据格式转换
Axios 支持多种数据格式的转换，这使得在发送请求和接收响应时能够轻松地处理不同格式的数据。以下是 Axios 支持的一些常见数据格式转换：
-
JSON：
Axios 默认会将请求和响应数据转换为 JSON 格式。当你发送一个请求时，Axios 会自动将 JavaScript 对象序列化为 JSON 字符串。同样地，当接收到响应时，Axios 也会自动将 JSON 字符串解析为 JavaScript 对象。 -
URL Encoded Format：
对于表单数据，Axios 可以自动将 JavaScript 对象序列化为application/x-www-form-urlencoded格式，这通常用于 HTML 表单数据的提交。 -
Text：
如果你想要接收纯文本响应，可以在请求配置中设置responseType为'text'，这样 Axios 就不会尝试解析响应内容。 -
Blob：
对于二进制数据，如文件下载，你可以设置responseType为'blob'。这样，响应数据将作为 Blob 对象返回，可以用于创建文件或进行进一步的处理。 -
Array Buffer：
对于原始的二进制数据，可以设置responseType为'arraybuffer'。这将返回一个 ArrayBuffer 对象，适用于处理二进制数据流。 -
自定义转换：
Axios 允许你通过transformRequest和transformResponse配置项来添加自定义的数据转换函数。这些函数可以在发送请求之前和接收响应之后对数据进行处理。
以下是如何在 Axios 中设置 responseType 和自定义转换函数的示例：
// 设置响应类型为 blob
axios({
url: 'https://api.example.com/file',
method: 'get',
responseType: 'blob' // 重要
}).then((response) => {
// 处理 Blob 数据
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'filename.pdf');
document.body.appendChild(link);
link.click();
link.parentNode.removeChild(link);
window.URL.revokeObjectURL(url);
}).catch((error) => {
console.error('Error during file download:', error);
});
// 自定义转换函数
axios({
method: 'post',
url: 'https://api.example.com/data',
data: {
title: 'Example Title',
body: 'This is a new post.',
userId: 1
},
transformRequest: [function (data, headers) {
// 对 data 进行任意转换处理
return data;
}],
transformResponse: [function (data) {
// 对响应数据进行任意转换处理
return data;
}]
});通过这些转换功能，Axios 提供了灵活的方式来处理各种类型的数据，满足不同场景下的需求。
三、Axios 处理跨域问题的方法
Axios 在发送请求时处理跨域问题主要有以下几种方法：
1、服务器端设置 CORS（跨源资源共享）：
跨域问题的根本解决方案是在服务器端配置 CORS 头。服务器需要设置 Access-Control-Allow-Origin 响应头，以允许特定的域名进行跨域请求。例如，在 Node.js 和 Express 框架中，可以安装 cors 中间件并使用它来允许跨域请求：
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors()); // 允许所有来源的跨域请求如果需要更详细的配置，例如只允许特定的域名访问，可以这样配置：
app.use(cors({
origin: 'http://localhost:8080', // 只允许从这个地址的跨域请求
methods: ['GET', 'POST'], // 允许的 HTTP 方法
allowedHeaders: ['Content-Type', 'Authorization'] // 允许的请求头
}));
2、开发环境中使用代理：
在开发环境中，可以使用 Webpack 开发服务器的代理功能来解决跨域问题。例如，在 Vue CLI 项目中，可以通过修改 vue.config.js 文件来设置代理：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: { '^/api': '' }
}
}
}
}这样，所有发往 /api 的请求都会被代理到 http://localhost:3000。
3、使用 JSONP：
JSONP 是一种只能支持 GET 请求的跨域解决方案。通过动态创建 <script> 标签来绕过同源策略的限制。
4、使用代理服务器：
在本地启动一个代理服务器，将请求转发到目标服务器，从而避免跨域问题。例如，使用 Node.js 和 Express 搭建一个简单的代理服务器：
const express = require('express');
const axios = require('axios');
const app = express();
const port = 3000;
app.use(express.json());
app.get('/api/data', async (req, res) => {
try {
const response = await axios.get('https://目标服务器的URL/data');
res.json(response.data);
} catch (error) {
res.status(500).json({ error: 'Failed to fetch data from the target server' });
}
});
app.listen(port, () => {
console.log(`Proxy server is running on http://localhost:${port}`);
});然后修改 Axios 请求地址，指向代理服务器即可：
axios.get('http://localhost:3000/api/users')
这些方法可以帮助开发者在使用 Axios 发送请求时解决跨域问题，确保请求能够成功到达目标服务器。
![[机器学习]sklearn入门指南（2）](https://i-blog.csdnimg.cn/direct/c2959f388bae4340acb8f6564d644268.png)
