Weird Axios Network Error with seemingly error-free code

Question

I am trying to use react to get data from an API (Python, I'm hosting it on the same machine).
API Code:

from flask import Flask, jsonify, request
app = Flask(__name__)

@app.route('/')
def all_data():
all_data = "Hello"
return jsonify({
'data':all_data,
'message':"success"
}), 200

if __name__ == "__main__":
app.run(debug=True)

React code(Didn't include the render()):

export default class HomeScreen extends Component {
  constructor(props){
    super(props);
    this.state = {
      listData:[],
      url:"http://localhost:5000"
    }
  }
  getPlanets=()=>{
    console.log("Axios called")
    const url = this.state.url;
    console.log(url)
    axios.get(url).then((response)=>{
      console.log(response.data)
      return this.setState({listData:response.data})
    }).catch((error)=>{
      console.log(error.message)
      Alert.alert(error.message);
    })
  }

  componentDidMount(){
    this.getPlanets();
  }
}

I'm always getting Network Error for the console.log(error.message). I'm also getting a larger Error: "Network Error" in Error: Network Error << at e.exports (axios.js:3:7286) << at d.onerror (axios.js:3:6270) for console.log(error).
Simultaneously, I got two weird error messages in my API:

code 400, message Bad request version ('localhost\x00\x17\x00\x00ÿ\x01\x00\x01\x00\x00')

"▬♥☺☻☺☺ü♥♥ÆuaTÁS¾eài ¸ ²`½‼/cùCf{&*½(¨qh↓(â®z↨Ó ×D ÚÚ‼☺‼☻‼♥À+À/À,À0̨̩À‼À¶úú♫♀                                                                   l
ocalhost↨ÿ☺☺" HTTPStatus.BAD_REQUEST -

Help?

I've tried looking through a lot of websites for the problem, but they all just suggested adding the http:// prefix to my url, which I had already done. I'm also using Python for the API and not NodeJS, so I don't need to use CORS. I just couldn't find a relevant fix anywhere.