[尝试使用axios从Firebase提取数据时出现错误

Question

我正在尝试使用react构建Web应用程序。我想使用axios从Firebase提取数据，但是在使用get方法并将链接传递到get方法时，出现以下错误。

localhost /：1在'https‍：//console.firebase##########base/data/'（从'https‍：// ###########重定向到XMLHttpRequest的访问起源（http：//：// localhost：3000）的####### firebaseio.com/）已被CORS策略阻止：所请求的资源上没有“ Access-Control-Allow-Origin”标头。 >

我无法弄清楚我在做什么错。让我知道是否需要更多信息。

这里是代码

import React, { Component } from 'react';
import Aux from '../../hoc/aux';
import Classes from './body.css';
import Logo from '../../assets/image/Logo.png';
import Tank from './tank/tank';
import TankDetail from './TankDetail/TankDetail';
import axios from 'axios';

class body extends Component{

    state={
        percentage:0
    }

    watermeterHandler=(info)=>{
        let num= info;
        let result=Number(((100/90)*num).toPrecision(2))
        this.setState({
            percentage: result
        })
    }

    componentDidUpdate(){
        axios.get('https://dista#################.com/')
        .then(response=>{
            console.log(response)
            //this.watermeterHandler(response.data);
        })
    }



    render(){
        return(
        <Aux>
            <div className={Classes.upperBody}>
                <img src={Logo} alt='hi'/>
                <h1>" Make Every Drop of Water Count "</h1>
                <button onClick={this.props.scroll}>Start Conservation</button>
            </div>
            <div className={Classes.lowerBody}>

                <div className={Classes.tankBody}>
                    <Tank percent={this.state.percentage}/> 
                </div>
                <div className={Classes.tankDetail}>
                    <TankDetail dataDetail={this.state.percentage}/>
                </div>

            </div>
        </Aux>

    );
    }
}



export default body;

我正在尝试使用react构建Web应用程序。我想使用axios从Firebase提取数据，但是在使用get方法并将链接传递到get方法时，出现以下错误。 ...

Answer 1

只需将.json添加到在get函数中作为参数设置的链接。这样可以消除错误。