从 React 发布到 Flask

Question

我是运行我的 React App localhost:3000 并向我的后端 Flask 服务器发送请求，该服务器位于运行端口：localhost:5000。这是我按下提交时执行的代码：

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");
      }
    }}

这是我的烧瓶后端代码：

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)

我用 POSTMAN 测试了我的 API，它可以工作，但不能与 React 一起工作。我是 React 的新手，所以如果我遗漏了什么会感到困惑吗？这是完整的片段：

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>
}

控制台中显示的错误：

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

Answer 1

犯了一个非常愚蠢的错误：

fetch('localhost:5000/register' 应该替换为：fetch('http://localhost:5000/register')

从 React 发布到 Flask

Posting from React to Flask

flask

reactjs

flask-restful