实践webpack+es6+react+redux+antd构建项目(三) 配置proxy代理

最新推荐文章于 2025-06-23 15:27:48 发布

赵乘风_i

最新推荐文章于 2025-06-23 15:27:48 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack React React学习从入坑到放弃文章标签： webpack devServer proxy代理 Easy Mock

原创首发，欢迎关注~！如需转载，请注明出处

本文链接：https://blog.csdn.net/zr15829039341/article/details/85321441

React 同时被 3 个专栏收录

45 篇文章

订阅专栏

React学习从入坑到放弃

28 篇文章

订阅专栏

webpack

8 篇文章

订阅专栏

本文介绍如何使用EasyMock配置代理并调用模拟数据，通过在webpack配置文件中设置代理规则，实现在开发环境中请求mock数据，同时提供fetch请求示例。

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

上一篇是关于引入react,redux,antd的，项目已经可以正常运行了，但是拿到的都是定义的死数据。这篇文章讲一下配置代理，调mock数据。

简便起见，我使用的是Easy Mock，定义好mock数据，在项目中引入使用。

先说一下Easy Mock的使用方法，

创建一个项目，

创建好之后，进入刚才创建的这个项目

创建接口

并在左侧添加数据

创建好之后，就是要在项目中使用了。

webpack.config.js中设置

devServer中添加

        // 配置easymock代理
        proxy: {
            "/api":{
                changeOrigin: true,
                target: "https://www.easy-mock.com/mock/5c24adb39a96a934e48de313"
            }
        }

上面写法会找到 /api/的接口，然后代理到target的路径上去

参考：https://www.webpackjs.com/configuration/dev-server/#devserver-proxy

request中使用的方法是fetch

接口请求

import request from '../../utils/request';

const listData = res => ({
    type: 'LIST_DATA',
    payload: res
});

export const getTodoList = (params, fn) => async (dispatch) => {
    try {
        const result = await request('/api/change/list', {
            method: 'GET',
            data: params
        });
        await dispatch(listData(result.data));
        fn();
    } catch (error) {

    }
}

/api是必须要有的，会匹配找到以/api开始的接口，代理到target的路径上，访问数据的路径就是

https://www.easy-mock.com/mock/5c24adb39a96a934e48de313/api/change/list

基本都是可以拿到数据的，如果没有拿到，不要慌，一般都是路径上的问题，

request.js

export default async function request(url, options) {
    return requestDataProcess(url, options);
}
async function requestDataProcess(url, options) {
    if (/post/i.test(options.method)) {
        let { data } = options;
        let body = null;
        if (typeof data === 'string') {
            body = data;
        } else {
            body = JSON.stringify(data);
        }
        options.body = body;
        delete options.data;
    }
    let headers = {};
    headers['Content-Type'] = 'application/json';
    options.headers = headers;

    const result = await fetch(url, options).then(res => res.json());
    return result;
}

我使用的是比较简单的代理，如果需要使用的复杂的，可以参考官网。

链接：实践webpack+es6+react+redux+antd构建项目(一) webpack配置

实践webpack+es6+react+redux+antd构建项目(二) react，redux，antd引入

实践webpack+es6+react+redux+antd构建项目(四) 区分dev和prod环境

项目github地址

关注我获取更多前端资源和经验分享