Reactjs 从反应瓶到烧瓶的过帐

我正在localhost:3000上运行我的React应用程序，并向我的后端flask服务器发送请求，该服务器在端口：localhost:5000上运行。以下是我按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");
      }
    }}

这是我的flask后端代码：

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

import React，{useState}来自“React”；
从“react引导/表单”导入表单；
从“反应引导/按钮”导入按钮；
导出默认函数注册表屏幕（）
{
const[Device_ID，setDevice_ID]=使用状态（“”）；
常量[Registerar_用户名，setRegisterar_用户名]=useState（“”）；
const[Registerar_Email，setRegisterar_Email]=useState（“”）；
const[organization_Name，setorganization_Name]=使用状态（“”）；
const[organization_Email，setorganization_Email]=使用状态（“”）；
const[Password，setPassword]=useState（“”）；
const[ReenterPassword，setReenterPassword]=useState（“”）；
函数注册（）
{
警惕（“拿着这个”）；
}
返回
注册设备ID
setDevice_ID（e.target.value）}
占位符=“设备ID”值={Device\u ID}/>
{/*
输入注册水行业提供给您的设备ID。
*/}
行业名称
setRegisterar_用户名（e.target.value）}
值={Registerar\u UserName}/>
行业电子邮件
setRegisterar_电子邮件（e.target.value）}/>
机构名称
setOrganization_Name（e.target.value）}/>
行业电子邮件
SetOrganization_电子邮件（e.target.value）}/>
密码
setPassword（e.target.value）}/>
重新输入密码
setReenterPassword（e.target.value）}/>
{
const JSONString={Device\u ID，Registerar\u UserName}；
const response=wait fetch（'localhost:5000/寄存器'{
方法：“POST”，
标题：{
“内容类型”：“应用程序/json”
},
正文：JSON.stringify（JSONString）
});
if（response.ok）{
控制台日志（“收到响应”）；
}
}}>
登记
}

控制台中显示的错误：

inject.bundle.js:1获取chrome-extension://invalid/ net:：ERR_失败

---

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

---

fetch（'localhost:5000/寄存器'

应替换为：

fetch（'http://localhost:5000/register“）

你难道没有忘记

http://

本地主机：5000/注册的一部分吗？谢谢@Alveona我觉得我添加了一个答案，但没有发布。但是是的，我只是犯了那个愚蠢的错误。再次感谢。