React前端配置跨域

一、引入依赖

npm add http-proxy-middleware

二、创建setupProxy.js

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

module.exports = function(app) {
    app.use(
        '/reqDev', // 需要代理的接口路径
        createProxyMiddleware({
            target: 'http://10.88.7.97:8022/ierp/', // 目标服务器地址
            changeOrigin: true, // 是否改变源地址
            pathRewrite: {
                '^/reqDev': '', // 重写路径
            },
        })
    );
    //=============配置多个代理=============
    app.use(
        '/reqPro', // 需要代理的接口路径
        createProxyMiddleware({
            target: 'http://10.88.7.7:8022/ierp/', // 目标服务器地址
            changeOrigin: true, // 是否改变源地址
            pathRewrite: {
                '^/reqPro': '', // 重写路径
            },
        })
    );
};

三、请求

import axios from "axios";
import localInfo from "../localInfo";
import {sleep} from "antd-mobile/es/utils/sleep";

const IS_DEV = localInfo.IS_DEV
const BASE_URL = IS_DEV ? "/reqDev/" : "/reqPro/"
const ERROR_ENUM = {
    SERVICE_ERROR: "服务器发生错误，请检查服务器!",
    ECONNABORTED: "请求超时!请检查网络!",
    ERR_NETWORK: "网络连接错误!",
}
/**
 * get请求
 * @param url 请求地址
 * @param params 请求参数
 * @returns {Promise<unknown>}
 */
const requestForGet = async (url, params) => {
    await sleep(1000)
    return new Promise(async (resolve, reject) => {
        return await axios({
            method: "get",
            url: BASE_URL + url,
            params: params,
            timeout: 30000,
        }).then(resp => {
            if (resp) {
                const {data} = resp
                if (data){
                    return resolve(data?.data)
                }
                return resolve(resp)
            }
            return resolve(resp)
        }).catch(async err => {
            const status = err?.response?.data?.status
            if (status) {
                if (status === 500) {
                    return reject(ERROR_ENUM.SERVICE_ERROR)
                }
            } else {
                if (err?.code === "ECONNABORTED") {
                    return reject(ERROR_ENUM.ECONNABORTED)
                }
                if (err?.code === "ERR_NETWORK") {
                    return reject(ERROR_ENUM.ERR_NETWORK)
                }
            }
            return reject(err)
        })
    })
}