全栈技术博客-文章详情

React如何封装axios请求和解决跨域

最后更新时间：2025-08-27 04:52:40

react axios

## 一、安装axios
```js
yarn add axios -D or npm i axios -D
```
## 二、在src目录下新建request文件,新建apiUrl.js
```js
//对外提供的服务地址
export const publicIp = process.env.NODE_ENV === "development" ? "http://127.0.0.1:3001" : "";
//对外提供获取图片的地址
export const logoImgIp = process.env.NODE_ENV === "development" ? "" : "";
// 登录路由
export const LOGIN = "";

```
## 三、新建index.js请求封装
```js
import axios from "axios";
import { publicIp } from "./apiIp";
import { message } from "antd";
let hide = null;
const instance = axios.create({
  //创建axios实例，在这里可以设置请求的默认配置
  timeout: 10000, // 设置超时时间10s
  baseURL: publicIp, //根据自己配置的反向代理去设置不同环境的baeUrl
});
// 文档中的统一设置post请求头。下面会说到post请求的几种'Content-Type'
instance.defaults.headers.post["Content-Type"] = "application/json";

let httpCode = {
  //这里我简单列出一些常见的http状态码信息，可以自己去调整配置
  400: "请求参数错误",
  401: "权限不足, 请重新登录",
  403: "服务器拒绝本次访问",
  404: "请求资源未找到",
  500: "内部服务器错误",
  501: "服务器不支持该请求中使用的方法",
  502: "网关错误",
  504: "网关超时",
};

/** 添加请求拦截器 **/
instance.interceptors.request.use(
  (config) => {
    config.headers["token"] = sessionStorage.getItem("token") || "";
    hide = message.loading({ content: "Loading...", duration: 0 });
    // 在这里：可以根据业务需求可以在发送请求之前做些什么:例如我这个是导出文件的接口，因为返回的是二进制流，所以需要设置请求响应类型为blob，就可以在此处设置。
    if (config.url.includes("pur/contract/export")) {
      config.headers["responseType"] = "blob";
    }
    // 我这里是文件上传，发送的是二进制流，所以需要设置请求头的'Content-Type'
    if (config.url.includes("pur/contract/upload")) {
      config.headers["Content-Type"] = "multipart/form-data";
    }
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

/** 添加响应拦截器  **/
instance.interceptors.response.use(
  (res) => {
    console.log(res)
    hide();
    if (res.data.code == "200") {
      // 响应结果里的statusText: ok是我与后台的约定，大家可以根据实际情况去做对应的判断
      return Promise.resolve(res.data);
    } else {
      message.error(res.data.message);
      return Promise.reject(res.data.message);
    }
  },
  (error) => {
    hide();
    if (error.response) {
      // 根据请求失败的http状态码去给用户相应的提示
      let tips =
        error.response.status in httpCode
          ? httpCode[error.response.status]
          : error.response.data.message;
      message.error(tips);
      if (error.response.status === 401) {
        // token或者登陆失效情况下跳转到登录页面，根据实际情况，在这里可以根据不同的响应错误结果，做对应的事。这里我以401判断为例
        //针对框架跳转到登陆页面
        this.props.history.push("/admin/page");
      }
      return Promise.reject(error);
    } else {
      message.error("请求超时, 请刷新重试");
      return Promise.reject("请求超时, 请刷新重试");
    }
  }
);

/* 统一封装get请求 */
export const get = (url, params, config = {}) => {
  return new Promise((resolve, reject) => {
    instance({
      method: "get",
      url,
      params,
      ...config,
    })
      .then((response) => {
        resolve(response);
      })
      .catch((error) => {
        reject(error);
      });
  });
};

/* 统一封装post请求  */
export const post = (url, data, config = {}) => {
  return new Promise((resolve, reject) => {
    instance({
      method: "post",
      url,
      data,
      ...config,
    })
      .then((response) => {
        resolve(response);
      })
      .catch((error) => {
        reject(error);
      });
  });
};

/* 统一封装del请求  */
export const del = (url, data, config = {}) => {
  return new Promise((resolve, reject) => {
    instance({
      method: "delete",
      url,
      data,
      ...config,
    })
      .then((response) => {
        resolve(response);
      })
      .catch((error) => {
        reject(error);
      });
  });
};
/* 统一封装update请求  */
export const patch = (url, data, config = {}) => {
  return new Promise((resolve, reject) => {
    instance({
      method: "patch",
      url,
      data,
      ...config,
    })
      .then((response) => {
        resolve(response);
      })
      .catch((error) => {
        reject(error);
      });
  });
};
```
## 四、在src目录下创建api接口文件
login.js文件如下：

![login.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dc92ff4d615c40ee8854693691b5cf4f~tplv-k3u1fbpfcp-watermark.image)
api.js文件如下

![api.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2e882f67f23746ad9f1b26c14e5fbf21~tplv-k3u1fbpfcp-watermark.image)

## 五、在react的index.js的入口文件下挂载封装的请求和接口
```js
import React, { Component } from "react";
import ReactDOM from 'react-dom';
import './index.less';
import './assets/root.css';
import App from './App';
import { get, post, del, patch } from "./api/request";
import { apiUrl } from "./api/apiUrl";
import * as serviceWorker from './serviceWorker';
Component.prototype.get = get;
Component.prototype.post = post;
Component.prototype.del = del;
Component.prototype.patch = patch;
Component.prototype.api = apiUrl;
ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

```
## 六、如何使用
 ```js
  let prams = {
      username:''
  }
  this.post(`${this.api.login.login}`, prams).then( res => {
     console.log(res)
  })
  --- `this.get`是使用方法，
  ---`${this.api.login.login`是调用的接口,
  ---`prams`是请求参数
 ```
## 七、如何解决跨域
### 1.在package.json文件中配置proxy信息
***React 2.0及以下的版本：***
```js
"proxy": "http://服务器地址"  // 配置你要请求的服务器地址
```
***新版本支持配置多个代理***
```js
"proxy": {
    "/path1": {
      "target": "http://服务器地址01",
      "changeOrigin": true
    },
    "/path2": {
      "target": "http://服务器地址02",
      "changeOrigin": true
    }
  }
```
### 2、使用第三方依赖包（“http-proxy-middleware”）

`npm install http-proxy-middleware`

在src目录下创建setupProxy.js文件
其内容为：
```js
const proxy = require("http-proxy-middleware");

module.exports = function (app) {
    app.use(proxy("/data", {
        target: "http://服务器地址1", //配置你要请求的服务器地址
        pathRewrite: {'^/data': ''},
        changeOrigin: true,
    }))
    app.use(proxy("/rest", {
        target: "http://服务器地址2",
        pathRewrite: {'^/data': ''},
        changeOrigin: true,
    }))
};
```

React如何封装axios请求和解决跨域

留言条数·0