(十)学习笔记--react使用 http-proxy-middleware解决跨域问题+ajax二次封装

最新推荐文章于 2024-08-09 07:19:33 发布

Augustine_Cyq

最新推荐文章于 2024-08-09 07:19:33 发布

阅读量938

点赞数

分类专栏： 2020年学习笔记

本文链接：https://blog.youkuaiyun.com/Augustine_Cyq/article/details/106641776

版权

2020年学习笔记专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何使用http-proxy-middleware在React应用中解决跨域问题，包括安装、配置setupProxy.js文件以及在start.js中的设置。同时，文章还涉及了对ajax的二次封装，提升前端请求的便捷性和统一性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.http-proxy-middleware

第一步安装 http-proxy-middleware

第二步 src下创建一个 setupProxy.js文件

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

module.exports = function (app) {
    // proxy第一个参数为要代理的路由
    // 第二参数中target为代理后的请求网址，changeOrigin是否改变请求头，其他参数请看官网
    app.use(createProxyMiddleware('/api', {
        target: 'http://192.168.0.83:8000',
        changeOrigin: true
    }))
}

第三步 start.js里面做一下配置

2.ajax二次封装

import axios from 'axios';
import { ZT_API_BASEURL } from '@/config/base';

/**
 * @func
 * @desc 统一接口封装
 * @param {any} options 请求参数
 * @param {string} options.url 请求地址
 * @param {string} options.method 请求方式
 * @param {string} options.data 请求参数
 * @param {boolean} options.isFormData 是否是表单提交
 */
export function request(options) {
    // 获取token
    const token = window.localStorage.getItem('erp-token');
    // 默认配置，请求头，超时时间，baseUrl
    const defaultOptions = {
        timeout: 10000,
        baseURL: ZT_API_BASEURL,
        headers: {
            'Zmdms-Auth': token
        }
    }
    // 将传入配置与默认配置混合
    const newOptions = { ...defaultOptions, ...options };
    // 特殊请求处理
    if (
        newOptions.method?.toUpperCase() === 'POST' ||
        newOptions.method?.toUpperCase() === 'PUT' ||
        newOptions.method?.toUpperCase() === 'PATCH'
    ) {
        if (newOptions.isFormData) {
            const formData = new FormData();
            const dataObj = newOptions.data || {};
            const dataKey = Object.keys(dataObj);
            const dataVal = Object.values(dataObj);
            for (let i = 0; i < dataKey.length; i++) {
                formData.append(dataKey[i], dataVal[i]);
            }
            newOptions.headers = {
              "Content-Type": "multipart/form-data",
            };
            newOptions.data = formData;
        } else {
            newOptions.headers = {
                'Content-Type': 'application/json',
                ...newOptions.headers,
            };
            newOptions.body = JSON.stringify(newOptions.body);
        }
    }

    // 拦截器，拦截响应头信息
    axios.interceptors.response.use(
        response => {
            // 服务端定义的响应status为200时请求成功
            if (response.status === 200) {
                return Promise.resolve(response)
            } else {
                return Promise.reject(response)
            }
        },
        error => {
            if (error?.response?.status === 401) {
                window.location.href = "/login";
            }
            return Promise.reject(error);
        }
    );
    // 返回axios对象
    return axios(newOptions)
}