react反向代理使用http-proxy-middleware问题

 更新时间:2024年07月12日 09:58:21   作者:jenie  
这篇文章主要介绍了react反向代理使用http-proxy-middleware问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

简介

http-proxy-middleware用于后台将请求转发给其它服务器。

安装

$ npm install --save-dev http-proxy-middleware

使用

在src同级目录创建setupProxy.js 如图所示

const { createProxyMiddleware } = require('http-proxy-middleware');  //注意写法,这是1.0以后的版本,最好按抄

module.exports = function (app) {
    app.use(createProxyMiddleware('/api',
        {
            target: 'http://ip:8000/',
            pathRewrite: {
                '^/api': '',
            },
            changeOrigin: true,
            secure: false, // 是否验证证书
            ws: true, // 启用websocket
        }
    ));
};

以上表达的意思是,把/api 代理到 http://ip:8000/ 到这个网址上,重写一定要,如果不写

pathRewrite: {
    '^/api': '',
},

会异常,会直接代理到http://ip:8000/api上去了,不是我们要的结果

测试

handle_click = ()=>{
    let t = this;
    fetch("/api/org/all", {method: 'GET'}).then(
        function (res) {
            console.log(res);
            res.json().then(function (data) {
                    console.log(data);
                    t.setState({
                        news:data
                    });
                }
            )
        });
};

其中/api/org/all 表达的网址的数据是

{
    "total": 1,
    "list": [{
        "id": "64",
        "name": "湖南长沙",
        "code": "hncs",
        "type": "试装"
    }],
    "pageNum": 1,
    "pageSize": 10,
    "size": 1,
    "startRow": 1,
    "endRow": 1,
    "pages": 1,
    "prePage": 0,
    "nextPage": 0,
    "isFirstPage": true,
    "isLastPage": true,
    "hasPreviousPage": false,
    "hasNextPage": false,
    "navigatePages": 8,
    "navigatepageNums": [1],
    "navigateFirstPage": 1,
    "navigateLastPage": 1,
    "firstPage": 1,
    "lastPage": 1
}

完整代码。

其中用到了antd mobile的东西,选择重要的看即可

import React, {Component} from 'react';
import { Picker, List, WhiteSpace } from 'antd-mobile';
import { createForm } from 'rc-form';

const prjList = [
    {
        label: "柳州项目",
        value: '1',
    },
    {
        label: "南宁项目",
        value: '2',
    },
];


class Add extends React.Component {
    state = {
        prjList: [],
        cols: 1,
        pickerValue: [],
        asyncValue: [],
        visible: false,
        colorValue: ['#00FF00'],
    };
    onChangeColor = (color) => {
        this.setState({
            colorValue: color,
        });
    };

    handle_click = ()=>{
        let t = this;
        fetch("/api/org/all", {method: 'GET'}).then(
            function (res) {
                console.log(res);
                res.json().then(function (data) {
                        console.log(data);
                        t.setState({
                            news:data
                        });
                    }
                )
            });
    };
    render() {
        const { getFieldProps } = this.props.form;
        return (<div>

            <WhiteSpace size="lg" />
            <List style={{ backgroundColor: 'white' }} className="picker-list">
                <Picker
                    data={prjList}
                    value={this.state.colorValue}
                    cols={1}
                    onChange={this.onChangeColor}
                >
                    <List.Item arrow="horizontal">选择项目</List.Item>
                </Picker>

            </List>
            <WhiteSpace size="lg" />
            <button onClick={this.handle_click}>button</button>
        </div>);
    }
}
const Wrapper = createForm()(Add);
export default class OrderAdd extends Component {
    render() {
        return (
            <Wrapper />
            )
    }
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 2个奇怪的react写法

    2个奇怪的react写法

    大家好,我卡颂。虽然React官网用大量篇幅介绍最佳实践,但因JSX语法的灵活性,所以总是会出现奇奇怪怪的React写法。本文介绍2种奇怪(但在某些场景下有意义)的React写法。也欢迎大家在评论区讨论你遇到过的奇怪写法
    2023-03-03
  • 聊聊jenkins部署vue/react项目的问题

    聊聊jenkins部署vue/react项目的问题

    本文给大家介绍了jenkins部署vue/react项目的问题,文末给大家提到了centOS安装jenkins的脚本,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2022-02-02
  • 在 React Native 中使用 CSS Modules的配置方法

    在 React Native 中使用 CSS Modules的配置方法

    有些前端工程师希望也能像开发 web 应用那样,使用 CSS Modules 来开发 React Native,本文将介绍如何在 React Native 中使用 CSS Modules,需要的朋友可以参考下
    2022-08-08
  • React实现合成事件的源码分析

    React实现合成事件的源码分析

    React 中的事件,是对原生事件的封装,叫做合成事件。抽象出一层合成事件,是为了做兼容,抹平不同浏览器之间的差异。本文将从事件绑定和事件触发角度,带大家解读下源码,感兴趣的可以了解一下
    2022-12-12
  • 示例详解react中useState的用法

    示例详解react中useState的用法

    useState 通过在函数组件里调用它来给组件添加一些内部 state,React 会在重复渲染时保留这个 state,接下来通过一个示例来看看怎么使用 useState吧
    2021-06-06
  • React-Native中禁用Navigator手势返回的示例代码

    React-Native中禁用Navigator手势返回的示例代码

    本篇文章主要介绍了React-Native中禁用Navigator手势返回的示例代码,具有一定的参考价值,有兴趣的可以了解一下
    2017-09-09
  • ReactJs快速入门教程(精华版)

    ReactJs快速入门教程(精华版)

    React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.这篇文章主要介绍了ReactJs快速入门教程(精华版)的相关资料,需要的朋友可以参考下
    2016-11-11
  • 在React中与后端API进行交互的操作步骤

    在React中与后端API进行交互的操作步骤

    在现代Web开发中,前后端分离的架构已经成为一种趋势,React,作为一种流行的前端库,常常与后端API进行交互,以实现动态数据更新和用户体验优化,本文将深入探讨如何在React应用中与后端API进行交互,需要的朋友可以参考下
    2025-02-02
  • react 移动端实现列表左滑删除的示例代码

    react 移动端实现列表左滑删除的示例代码

    这篇文章主要介绍了react 移动端实现列表左滑删除的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • React state状态属性详细讲解

    React state状态属性详细讲解

    React将组件(component)看成一个状态机(State Machines),通过其内部自定义的状态(State)和生命周期(Lifecycle)实现并与用户交互,维持组件的不同状态
    2022-09-09

最新评论