react-ant-admin

Appearance

Return to top
On this page

请求配置

根据现有的axios配置快速解决业务上的请求设置

使用 src/setupProxy.js 解决 前端跨域问题。

该项目下的src/setupProxy.js配置是用来解决跨域问题。

const { createProxyMiddleware } = require("http-proxy-middleware");

const matchUrl = "/api"; // 请求是匹配的地址
const target = "https://azhengpersonalblog.top/"; // 目标网址
const prevUrl = "^/api"; // 以/api路径截取
const writeUlr = "/api/react-ant-admin"; // 重写请求路径
/**
 * 在使用 本地代理转发 请将 src/common/ajax.js axios的config baseURL 置为"/"
 * 假设本地 ajax 请求以/api开头，将去请求 目标网址 target
 * ajax.post("/api/getlist") 将/api 重写为 /api/react-ant-admin
 * 然后拼接 https://azhengpersonalblog.top/
 * 如：ajax.post("/api/getlist") => https://azhengpersonalblog.top/api/react-ant-admin/getlist
 */

module.exports = function (app) {
  app.use(
    createProxyMiddleware(matchUrl, {
      target,
      changeOrigin: true,
      secure: true, // https
      pathRewrite: { [prevUrl]: writeUlr },
    })
  );
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

WARNING

注意两点：

  1. axios 的BASE_URL只能为/或者不填。不能为某一地址如：http://xxx.xxx:xxx/xxx
  2. 如果以上的prevUrl为^/api的时候，使用 axios 调用post,get,等等请求时，必须加上前缀/api,例如：axios.post("/api/login")
  • 多个前缀拦截

在src/setupProxy.js中，你可以使用多个前缀拦截，或者转发到多个目标网站上。

const { createProxyMiddleware } = require("http-proxy-middleware");

const matchUrl = "/api"; // 请求是匹配的地址
const target = "https://azhengpersonalblog.top/"; // 目标网址
const prevUrl = "^/api"; // 以/api路径截取
const writeUlr = "/api/react-ant-admin"; // 重写请求路径

module.exports = function (app) {
  app.use(
    createProxyMiddleware("/api", {
      target: "https://azhengpersonalblog.top/",
      changeOrigin: true,
      secure: true, // https
      pathRewrite: {
        "^/api/get": "/getData",
        "^/api/post": "/postData",
      },
    })
  );
  // 以上的拦截请求的结果为
  // ajax.get("/api/get/userInfo") => https://azhengpersonalblog.top/getData/userInfo
  // ajax.post("/api/post/dologin") => https://azhengpersonalblog.top/postData/dologin
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

更多说明请看http-proxy-middleware 文档

自定义请求拦截

因为src/common/ajax.js是根据博主的请求逻辑进行拦截，请根据自己项目的请求参数进行配置。

import axios from "axios";
const config = {
  // ....
};
const instance = axios.create(config);
instance.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    //let token = getToken();
    //if (token) {
    //  config.headers["authorization"] = token;
    //}
   return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  function (response) {
    // if (response.data) {
    //   let { msg, status } = response.data;
    //   if (status === 1) {
    //     message.error(msg);
    //   }
    // }
    return response && response.data;
  },
  function (error) {
    // const { response, message } = error;
    // if (response && response.status) {
    //   const errorText = codeMessage[response.status] || response.statusText;
    //   const { status, config } = response;
    //   notification.error({
    //     message: `请求错误 ${status}: ${config.url}`,
    //     description: errorText,
    //   });
    //   if (response.status === 401 || response.status === 403) {
    //     clearLocalDatas([USER_INFO, TOKEN, MENU]);
    //     setTimeout(() => {
    //       window.location.reload();
    //     }, 1000);
    //   }
    // } else if (!response) {
    //   let description =
    //     message === "Network Error"
    //       ? "网络错误，请检查客户端是否存在网络故障或服务端无法响应"
    //       : "客户端出现错误";
    //   clearLocalDatas(["token"]);
    //   notification.error({
    //     description,
    //     message: "状态异常",
    //   });
    // }
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

get 请求支持自动拼接 url

因为使用qs这个库,在 get 请求上可以直接使用Object类型转化为 url 的拼接参数

import ajax from "@/common/ajax";

const data = {
  name: "kongyijilafumi",
  age: 22,
};
ajax.get("/getUserInfo", data); // /getUserInfo?name=kongyijilafumi&age=22
1
2
3
4
5
6
7

更多信息请查看qs 文档