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

本文介绍了两种配置代理的方法来解决前端开发中的跨域问题,一种是在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)
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值