Axios调用多个域名

在现代的Web开发中，前端应用经常需要与多个后端服务进行交互，这些服务可能部署在不同的域名上。为了高效地管理这些跨域请求，我们可以使用Axios库，并通过配置多个基础URL来简化请求过程。

解决方案

介绍如何使用Axios同时向多个域名发起请求。主要思路是通过创建多个Axios实例，每个实例对应一个特定的基础URL。这样不仅可以保持代码的清晰性，还能方便地管理和维护不同域名下的API调用。我们还会探讨其他几种实现方式，以满足不同场景下的需求。

1. 创建多个Axios实例

最直接的方法就是为每个目标域名创建独立的Axios实例：

javascript
// 导入axios库
import axios from 'axios';</p>

<p>// 定义两个不同的基础URL
const baseURL1 = 'https://api.example.com';
const baseURL2 = 'https://service.anotherdomain.com';</p>

<p>// 创建两个Axios实例
const apiClient1 = axios.create({
  baseURL: baseURL1,
  timeout: 5000, // 设置超时时间
});</p>

<p>const apiClient2 = axios.create({
  baseURL: baseURL2,
  timeout: 5000,
});</p>

<p>// 使用示例
async function fetchData() {
  try {
    const response1 = await apiClient1.get('/endpoint1');
    const response2 = await apiClient2.get('/endpoint2');</p>

<pre><code>console.log('Response from API 1:', response1.data);
console.log('Response from API 2:', response2.data);

} catch (error) {
console.error('Error fetching data:', error);
}
}

2. 动态设置基础URL

如果项目中存在大量API调用且涉及多个域名，可以考虑动态设置基础URL的方式：

javascript
import axios from 'axios';</p>

<p>function createApiClient(baseURL) {
  return axios.create({
    baseURL,
    timeout: 5000,
  });
}</p>

<p>// 使用时传入具体的baseURL
const client1 = createApiClient('https://api.example.com');
const client2 = createApiClient('https://service.anotherdomain.com');</p>

<p>// 发起请求
client1.get('/endpoint1').then(response => console.log(response.data));
client2.get('/endpoint2').then(response => console.log(response.data));

3. 使用代理服务器

对于某些特殊情况，比如频繁变更的目标域名或出于安全考虑，可以借助代理服务器统一处理跨域请求：

javascript
// 前端代码保持不变，所有请求都发送到本地代理服务器
const apiClient = axios.create({
  baseURL: '/proxy',
  timeout: 5000,
});</p>

<p>// 在服务器端（如Node.js）设置代理转发规则
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');</p>

<p>const app = express();</p>

<p>app.use('/proxy/api1', createProxyMiddleware({ target: 'https://api.example.com', changeOrigin: true }));
app.use('/proxy/api2', createProxyMiddleware({ target: 'https://service.anotherdomain.com', changeOrigin: true }));</p>

<p>app.listen(3000, () => {
  console.log('Proxy server is running on port 3000');
});

以上三种方法可以根据实际应用场景灵活选择，种方法适用于域名相对固定的情况；第二种方法适合于需要频繁切换基础URL的场景；第三种方法则更多用于企业级应用或者对安全性要求较高的项目。希望这些解决方案能够帮助开发者更好地处理跨域请求问题。