[前端]HTTP库Axios

一、Axios简介

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js 环境。它是一个流行的 JavaScript 库，用于发起 HTTP 请求，如 GET、POST、DELETE 等。Axios 提供了易于使用的 API，支持请求和响应的拦截、转换数据格式、客户端支持防御 XSRF（跨站请求伪造）等功能。

以下是 Axios 的一些主要特点：

1. 从浏览器中创建 XMLHttpRequests：

   允许从前端 JavaScript 代码中发送异步HTTP请求。

2. 从 node.js 发出 http 请求：

   在服务器端环境中，Axios 可以用于发送 HTTP 请求。

3. 支持 Promise API：

   Axios 提供了基于 Promise 的接口，使得异步请求的处理更加方便。

4. 转换请求和响应数据：

   自动转换 JSON 数据结构，也可以自定义转换函数。

5. 客户端支持防御 XSRF：

   Axios 可以配置来防御跨站请求伪造攻击。

6. 拦截请求和响应：

   允许在请求发送前后或响应返回前后执行拦截操作。

7. 取消请求：

   提供了取消请求的能力，可以用于防止不必要的网络请求。

8. 自动转换 JSON：

   Axios 会自动将请求和响应数据转换为 JSON。

9. 客户端支持防御 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 支持的一些常见数据格式转换：

1. JSON：

   Axios 默认会将请求和响应数据转换为 JSON 格式。当你发送一个请求时，Axios 会自动将 JavaScript 对象序列化为 JSON 字符串。同样地，当接收到响应时，Axios 也会自动将 JSON 字符串解析为 JavaScript 对象。

2. URL Encoded Format：

   对于表单数据，Axios 可以自动将 JavaScript 对象序列化为 application/x-www-form-urlencoded 格式，这通常用于 HTML 表单数据的提交。

3. Text：

   如果你想要接收纯文本响应，可以在请求配置中设置 responseType 为 'text'，这样 Axios 就不会尝试解析响应内容。

4. Blob：

   对于二进制数据，如文件下载，你可以设置 responseType 为 'blob'。这样，响应数据将作为 Blob 对象返回，可以用于创建文件或进行进一步的处理。

5. Array Buffer：

   对于原始的二进制数据，可以设置 responseType 为 'arraybuffer'。这将返回一个 ArrayBuffer 对象，适用于处理二进制数据流。

6. 自定义转换：

   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 发送请求时解决跨域问题，确保请求能够成功到达目标服务器。