解决axios的HTTP代理问题

在进行web开发时，我们经常会遇到需要使用HTTP代理的情况，例如在进行跨域请求或者爬虫开发时。axios是一个非常流行的HTTP请求库，它提供了丰富的接口和配置，使得我们可以方便地进行HTTP请求。然而，在实际使用中，我们可能会遇到axios的HTTP代理配置无法生效的问题。本文将详细介绍如何解决这个问题。

axios的HTTP代理问题

实际上 axios 是有代理配置选项的，但实际使用过后发现并不生效

import axios, { AxiosError } from 'axios'

async function test() {
    try {
        const response = await axios.get('http://xxxxx', {
            proxy: { 
                 host: '127.0.0.1',
                 port: 8101,
            },
            timeout: 30 * 1000,
        })
        console.log(response.data)
    } catch (error) {
        if (error?.isAxiosError) {
            console.error((error as AxiosError).toJSON())
            return
        }
        console.error(error)
    }
}

解决方案

幸运的是，我们可以通过使用第三方库https-proxy-agent或node-tunnel来解决这个问题。这些库可以帮助我们创建一个可以使用HTTP代理的axios实例。

首先，我们需要安装https-proxy-agent库。请确保你的axios版本为1.6.7或更高，https-proxy-agent版本为7.0.4或更高。

然后，我们可以创建一个axios实例，并在请求拦截器中设置代理：

const axios = require('axios').default
const httpsProxyAgent =require('https-proxy-agent')
const http = axios.create({
  baseURL: 'https://httpbin.org/',
  proxy: false,
})

// 由于很多接口都要走代理, 所以应该在拦截器里应用
http.interceptors.request.use(async (config) => {
  // 这里可以异步通过 api 去请求最新的代理服务器配置
  // 127.0.0.1:1080 是你的代理服务器的 ip 和端口, 由于我本地搭建了一个, 所以我使用我本地的测试
  config.httpsAgent = await new httpsProxyAgent.HttpsProxyAgent(`http://192.168.50.2:7890`)
  return config
}, (err) => Promise.reject(err))
http.interceptors.response.use((res) => res.data, (err) => Promise.reject(err))

new Promise(async () => {
  const data = await http.get(`/ip`).catch((err) => console.log(String(err)))
  // 如果这个地方返回了你的代理 ip 的地址, 则表示成功应用了代理
  console.log(`data`, data)
})

在这个例子中，我们在请求拦截器中设置了代理服务器的地址和端口。这样，所有通过这个axios实例发出的请求都将通过代理服务器进行。

axios的HTTP代理问题

解决方案

参考

评论