axios 设置跨域请求头

原创

mob64ca12cfec58 2023-11-10 07:15:56 ©著作权

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

使用axios设置跨域请求头

开发者常常需要使用axios来进行网络请求，而在实际开发中，由于浏览器的同源策略，可能会遇到跨域问题。本文将教你如何使用axios设置跨域请求头来解决这个问题。

整体流程

下面是整个流程的步骤示意图：

pie
    title 整体流程
    "创建axios实例" : 30
    "设置请求拦截器" : 20
    "设置响应拦截器" : 20
    "发送网络请求" : 30

步骤说明

1. 创建axios实例

首先，我们需要创建一个axios实例，可以根据项目的需要进行配置。这里我们创建一个名为axiosInstance的实例，并设置了基础的URL和请求超时时间。以下是需要添加的代码：

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: '
  timeout: 5000
});

2. 设置请求拦截器

接下来，我们需要设置请求拦截器，用于在发送请求之前进行一些处理。在这里，我们需要设置跨域请求头。以下是需要添加的代码：

axiosInstance.interceptors.request.use(
  config => {
    config.headers['Access-Control-Allow-Origin'] = '*';
    return config;
  },
  error => {
    console.error('请求拦截器错误', error);
    return Promise.reject(error);
  }
);

在代码中，我们通过config.headers来设置请求头，将Access-Control-Allow-Origin设置为*，表示允许任意源进行跨域请求。

3. 设置响应拦截器

然后，我们需要设置响应拦截器，用于在接收到响应之后进行一些处理。以下是需要添加的代码：

axiosInstance.interceptors.response.use(
  response => {
    // 这里可以对返回的数据进行处理
    return response;
  },
  error => {
    console.error('响应拦截器错误', error);
    return Promise.reject(error);
  }
);

在这段代码中，我们可以对返回的数据进行处理，比如对返回的数据进行解析或者错误处理。

4. 发送网络请求

最后，我们可以使用创建的axios实例来发送网络请求。以下是一个简单的示例：

axiosInstance.get('/api/data')
  .then(response => {
    console.log('请求成功', response.data);
  })
  .catch(error => {
    console.error('请求失败', error);
  });

这段代码发送了一个GET请求到/api/data接口，并在控制台打印出返回的数据。