React学习5 axios学习脚手架中配置代理+消息订阅发布

GocNeverGiveUp

已于 2023-05-31 14:56:59 修改

阅读量152

点赞数

文章标签： react.js 学习 javascript

于 2023-05-30 19:37:43 首次发布

本文链接：https://blog.csdn.net/qq_41444888/article/details/130934396

版权

本文介绍了两种配置代理的方法来解决前端开发中的跨域问题，一种是在package.json中添加proxy，另一种是创建setupProxy.js文件使用http-proxy-middleware。此外，提到了在React应用中使用三元运算符进行条件渲染，以及使用PubSubJs进行消息订阅和发布的实践。正常情况下，跨域问题也可通过后端设置CORS策略解决。

摘要由CSDN通过智能技术生成

端口不同无法访问，搭建代理解决跨域问题

配置代理方式1：package.json中添加 proxy，但是一次只能配置一个代理

方式2：scr下建立setupProxy.js文件，里面写固定的配置文件即可

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

module.exports = function(app){
    app.use(
        createProxyMiddleware('/api1', { // 遇见api1前缀的请求就会触发该代理配置
            target:'http://localhost:5000', // 请求转发给谁
            changeOrigin:true, // 控制服务器收到的请求头中Host字段（标识着本次请求是从哪里发出的）的值， 改变源请求地址， 一般要加上
            pathRewrite:{'^/api1':''} // 重写请求路径
        }),
        createProxyMiddleware('/api2', {
            target:'http://localhost:5001',
            changeOrigin:true,
            pathRewrite:{'^/api2':''}
        })
    )
}

const {keyWordElement:{value:rename}} = this // 连续解构赋值 + 重命名

正常上线的程序可以通过cors在后端直接解决跨域问题

神奇的连续调用三元表达式代替if逻辑：

    render() {
        const {users, isFirst, isLoading, err} = this.props
        return (
            <div className="row">
                {
                    isFirst ? <h2>欢迎使用，输入关键字，随后点击搜索</h2> :
                        isLoading ? <h2>Loading……</h2> :
                            err? <h2>{err}</h2> :
                                this.props.users.map((userObj)=>{
                                    return (
                                        <div key={userObj.id} className="card">
                                            <a href={userObj.html_url} target="_blank" rel="noreferrer">
                                                <img alt="" src={userObj.avatar_url} style={{width: '100px'}}/>
                                            </a>
                                            <p className="card-text">{userObj.login}</p>
                                        </div>
                                    )
                                })
                }
            </div>
        );
    }

消息订阅发布主流工具库：PubSubJs

// 订阅
    componentDidMount() {
        this.token = PubSub.subscribe('atguigu',(msg, stateObj)=>{
            this.setState(stateObj)
        })
    }

// 发布
    PubSub.publish('atguigu', {isFirst:false,isLoading:true})


// 取消订阅
    componentWillUnmount() {
        PubSub.unsubscribe(this.token)
    }