Search code examples
reactjsflaskflask-restful

Posting from React to Flask

I am running my React App on localhost:3000 and posting a request to my backend flask server which is running at the port: localhost:5000. Here is my code which executes when I press submit:

onClick={async()=>{
      const JSONString = {Device_ID,Registerar_UserName};
      const response = await fetch('localhost:5000/register',{
        method: 'POST',
        headers:{
          'Content-Type':'application/json'
        },
        body:JSON.stringify(JSONString)
      });
      if(response.ok){
        console.log("Response recieved");
      }
    }}

Here is my flask backend code:

from flask import Flask,jsonify
import datetime
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route('/register', methods=['POST'])
def postTest():
    print("TESTTTTTT")
    return "recieved"

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

I tested my API with POSTMAN and it works but doesn't work with React. I am new to React so was confused if I am missing something? Here's full snippet:

import React,{useState} from "react";
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
export default function RegisterScreen()
{
  const [Device_ID,setDevice_ID] = useState('');
  const [Registerar_UserName,setRegisterar_UserName] = useState('');
  const [Registerar_Email,setRegisterar_Email] = useState('');
  const [Organisation_Name,setOrganisation_Name] = useState('');
  const [Organisation_Email,setOrganisation_Email] = useState('');
  const [Password,setPassword] = useState('');
  const [ReenterPassword,setReenterPassword] = useState('');
  function registered()
  {
    alert("Take this");

  }
  
  
    return <Form className = "FormAligner">
    <Form.Group controlId="formBasicEmail">
      <Form.Label>Registered Device ID</Form.Label>
      <Form.Control type="text"
      onChange = {e=>setDevice_ID(e.target.value)}
      placeholder="Device ID" value={Device_ID}/>
      {/*<Form.Text className="text-muted">
        Enter the Device-ID provided to you by registered Water Industry.
        </Form.Text>*/}
    </Form.Group>
    <Form.Group controlId="formBasicEmail">
      <Form.Label>Industry Name</Form.Label>
      <Form.Control type="text" placeholder="Industry Name" 
      onChange={e=>setRegisterar_UserName(e.target.value)}
      value={Registerar_UserName}/>
    </Form.Group>
    <Form.Group controlId="formBasicEmail">
      <Form.Label>Industry Email</Form.Label>
      <Form.Control type="email" placeholder="Industry Email"
      value={Registerar_Email}
      onChange={e=>setRegisterar_Email(e.target.value)}/>
    </Form.Group>
    <Form.Group controlId="formBasicEmail">
      <Form.Label>Organisation Name</Form.Label>
      <Form.Control type="text" placeholder="Organisation Name"
      value={Organisation_Name}
      onChange={e=>setOrganisation_Name(e.target.value)}/>
    </Form.Group>
    <Form.Group controlId="formBasicEmail">
    <Form.Label>Industry Email</Form.Label>
    <Form.Control type="email" placeholder="Industry Email"
    value={Organisation_Email}
    onChange={e=>setOrganisation_Email(e.target.value)}/>
    </Form.Group>
    <Form.Group controlId="formBasicPassword">
    <Form.Label>Password</Form.Label>
    <Form.Control type="password" placeholder="Enter Password"
    value={Password}
    onChange={e=>setPassword(e.target.value)}/>
    </Form.Group>
   <Form.Group controlId="formBasicPassword">
    <Form.Label>Re-enter Password</Form.Label>
    <Form.Control type="password" placeholder="Enter Password"
    value={ReenterPassword}
    onChange={e=>setReenterPassword(e.target.value)}/>
    </Form.Group>
    <Button variant="primary" className="Submit-Button" type="submit"
    onClick={async()=>{
      const JSONString = {Device_ID,Registerar_UserName};
      const response = await fetch('localhost:5000/register',{
        method: 'POST',
        headers:{
          'Content-Type':'application/json'
        },
        body:JSON.stringify(JSONString)
      });
      if(response.ok){
        console.log("Response recieved");
      }
    }}>
      Register
    </Button>
  </Form>
}

Error that's showing in console: enter image description here

inject.bundle.js:1 GET chrome-extension://invalid/ net::ERR_FAILED

Solution

  • Did a really stupid mistake:

    fetch('localhost:5000/register' is supposed to be replaced by: fetch('http://localhost:5000/register')