axios使用代理服务器

原创

mob64ca12e1881c 2024-09-07 06:16:55 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12e1881c的原创作品，请联系作者获取转载授权，否则将追究法律责任

如何使用 Axios 与代理服务器

在现代 web 开发中，使用代理服务器进行 API 请求是一个常见的需求。这不仅提高了网络请求的安全性，还有助于避免跨域问题。本文将引导您一步一步地设置 Axios，通过代理服务器发送请求。

整体流程

步骤	说明
第一步	安装 Axios 和 HTTP-proxy-middleware
第二步	配置代理服务器
第三步	创建 Axios 实例
第四步	编写发起请求的代码

详细步骤

第一步：安装 Axios 和 HTTP-proxy-middleware

在项目目录中打开终端，运行以下命令：

npm install axios http-proxy-middleware

axios 是我们发送 HTTP 请求的库。
http-proxy-middleware 是我们用来创建代理的中间件。

第二步：配置代理服务器

在您的项目中，创建一个名为 setupProxy.js 的文件，内容如下：

const { createProxyMiddleware } = require('http-proxy-middleware');

// 设置代理
module.exports = function(app) {
  app.use(
    '/api', // 需要代理的路径前缀
    createProxyMiddleware({
      target: ' // 实际的API地址
      changeOrigin: true, // 修改请求头中的来源
    })
  );
};

'/api' 是我们想要代理的请求路径前缀。
target 是我们要请求的实际 API 地址（请根据需要更改）。
changeOrigin 可以确保在请求头中把原始来源更改为目标 URL。

第三步：创建 Axios 实例

在您的项目中创建一个文件 axiosInstance.js，并添加以下代码：

import axios from 'axios';

// 创建 Axios 实例
const axiosInstance = axios.create({
  baseURL: '/api', // 设置基础 URL 为代理路径
  timeout: 10000, // 设置请求超时时间
});

// 导出实例
export default axiosInstance;

baseURL 是我们代理的路径，会附加到所有请求前。
timeout 设置请求的超时时间。

第四步：编写发起请求的代码

当我们配置好 Axios 代理后，就可以发送请求了。以下是一个示例：

import axiosInstance from './axiosInstance';

// 发起 GET 请求
axiosInstance.get('/endpoint') // 替换成需要请求的 API 点
  .then(response => {
    console.log(response.data); // 成功时输出数据
  })
  .catch(error => {
    console.error('请求失败:', error); // 处理错误情况
  });

在这个代码块中，我们调用了 Axios 实例的 get 方法发送请求。如果请求成功，响应数据将会被打印在控制台；如果请求失败，将输出错误信息。

甘特图展示

为了帮助您更好地了解流程，以下是使用 mermaid 语法表示的甘特图：

gantt
    title 使用 Axios 与代理服务器
    dateFormat  YYYY-MM-DD
    section 步骤
    安装 Axios 和 HTTP-proxy-middleware :a1, 2023-10-01, 1d
    配置代理服务器                  :after a1  , 1d
    创建 Axios 实例                  :after a1  , 1d
    编写发起请求的代码               :after a1  , 1d