axios多个域名的跨域请求处理

admin 域名多个 2023-03-17 94浏览 0

axios多个域名的跨域请求处理

在前端开发中，我们经常会遇到需要从不同的域名下获取数据的情况。由于浏览器的同源策略限制，直接跨域请求会被浏览器拦截。这时候就需要使用axios来处理多个域名的跨域请求。本文将介绍如何使用axios来处理多个域名的跨域请求。

设置axios默认配置

在处理多个域名的跨域请求之前，我们需要先设置axios的默认配置。这样可以避免在每次请求时都需要重复设置相同的配置。我们可以在项目的入口文件中设置axios的默认配置，如下所示：

axios多个域名的跨域请求处理

```javascript import axios from 'axios'; axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = 'Bearer token'; ```

在这个例子中，我们将axios的默认域名设置为https://api.example.com，并且设置了一个通用的Authorization头部，这样在每次请求时都会自动带上这个头部。

接下来，我们需要针对不同的域名进行特定的配置。

创建实例

针对不同的域名，我们可以创建不同的axios实例。这样可以避免不同域名之间的请求混乱，并且可以针对不同域名设置不同的配置。我们可以在项目中创建多个axios实例，如下所示：

```javascript const instance1 = axios.create({ baseURL: 'https://api.example1.com', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} }); const instance2 = axios.create({ baseURL: 'https://api.example2.com', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} }); ```

在这个例子中，我们分别创建了两个axios实例，分别针对https://api.example1.com和https://api.example2.com这两个域名。并且针对每个实例设置了不同的超时时间和自定义头部。

使用实例发送请求

创建了多个axios实例之后，我们就可以使用这些实例来发送请求了。在发送请求时，只需要使用对应的实例即可。例如：

```javascript instance1.get('/user') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); instance2.get('/user') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); ```

在这个例子中，我们分别使用instance1和instance2来发送请求。这样就可以确保不同域名下的请求不会混淆，而且可以针对不同域名设置不同的处理逻辑。

拦截器处理

在处理多个域名的跨域请求时，我们可能会遇到一些共性的问题，比如统一处理请求和响应、统一处理错误等。这时候可以使用axios的拦截器来统一处理这些问题。

我们可以在创建axios实例时设置拦截器，如下所示：

```javascript instance1.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); instance1.interceptors.response.use(function (response) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); }); ```

在这个例子中，我们分别为instance1设置了请求和响应的拦截器。这样就可以在发送请求和接收响应时统一处理一些共性的问题。