Javascript TypeError:无法获取reactjs登录页

我一直在尝试创建一个登录页面，但出现了一个名为

“TypeError:Failed to fetch”

的错误。我不知道我哪里做错了，我检查了几个StackOverflow答案，就像我在一个StackOverflow答案中看到的那样，我尝试添加

事件.preventdefault

，但没有帮助

有人能指出我做错的地方吗

另外请注意：它在postman和API中运行良好。我在那里尝试了相同的电子邮件和密码，它在postman中运行良好，但在react网站上出现了错误

import React, { Component } from "react";
class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: ""
    };
    this.onchange = this.onchange.bind(this);
  }

  onchange(e) {
    this.setState({ [e.target.name]: e.target.value });
    console.log(this.state);
  }

  performLogin = async event => {
    event.preventDefault();
    console.log("button clicked");
    var body = {
      password: "this.state.password",
      email: "this.state.email"
    };

    const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json"
      },
      body: JSON.stringify(body)
    };

    const url = "/api/authenticate";

    try {
      const response = await fetch(url, options);
      const result = await response.json();
      console.log(result);
      console.log(`login successful`);
      window.alert("login succesful");
    } catch (error) {
      console.error(error);
    }
  };

  render() {
    return (
      <div>
        <input type="text" placeholder="emailid" onChange={this.onchange} />
        <br />
        <input
          type="password"
          placeholder="Enter your Password"
          onChange={this.onchange}
        />
        <br />
        <button type="submit" onClick={event => this.performLogin(event)}>
          Submit
        </button>
      </div>
    );
  }
}
export default Login;

如果我删除引号，那么它会在postman中给我错误的字符串错误

---

但是在codesandbox中，保存沙盒时引号会自动删除。这可能是因为这个原因，还是没什么好担心的？

首先，您需要提供输入名称属性，以便能够在更改时正确更新状态，如下所示：

<input type="text" name="email" placeholder="emailid" onChange={this.onchange} /> <br />
<input type="password" name="password" placeholder="Enter your Password" onChange={this.onchange}/>

   var body = {
      password: this.state.password,
      email: this.state.email
    };

import React, { Component } from "react";
class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: ""
    };
    this.onchange = this.onchange.bind(this);
  }
  onchange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }
  performLogin = async event => {
    event.preventDefault();
    var body = {
      password: this.state.password,
      email: this.state.email
    };
    const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json"
      },
      body: JSON.stringify(body)
    };
    const url = "/api/authenticate";
    try {
      const response = await fetch(url, options);
      const result = await response.json();
      console.log(result);
      if (response.ok) {
        console.log("login successful");
        window.alert("login succesful");
      } else {
        console.log("login failed");
        window.alert("login failed");
      }
    } catch (error) {
      console.error(error);
    }
  };

  render() {
    return (
      <div>
        <input
          type="text"
          name="email"
          placeholder="emailid"
          onChange={this.onchange}
        />
        <br />
        <input
          type="password"
          name="password"
          placeholder="Enter your Password"
          onChange={this.onchange}
        />
        <br />
        <button type="submit" onClick={event => this.performLogin(event)}>
          Submit
        </button>
        <hr />
        State: {JSON.stringify(this.state)}
      </div>
    );
  }
}
export default Login;

最后，您需要检查fetch响应是否正常，因为在4xx错误中，fetch不会给出错误

因此，在进行所有这些更改后，您的组件代码必须如下所示：

<input type="text" name="email" placeholder="emailid" onChange={this.onchange} /> <br />
<input type="password" name="password" placeholder="Enter your Password" onChange={this.onchange}/>

   var body = {
      password: this.state.password,
      email: this.state.email
    };

import React, { Component } from "react";
class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: ""
    };
    this.onchange = this.onchange.bind(this);
  }
  onchange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }
  performLogin = async event => {
    event.preventDefault();
    var body = {
      password: this.state.password,
      email: this.state.email
    };
    const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json"
      },
      body: JSON.stringify(body)
    };
    const url = "/api/authenticate";
    try {
      const response = await fetch(url, options);
      const result = await response.json();
      console.log(result);
      if (response.ok) {
        console.log("login successful");
        window.alert("login succesful");
      } else {
        console.log("login failed");
        window.alert("login failed");
      }
    } catch (error) {
      console.error(error);
    }
  };

  render() {
    return (
      <div>
        <input
          type="text"
          name="email"
          placeholder="emailid"
          onChange={this.onchange}
        />
        <br />
        <input
          type="password"
          name="password"
          placeholder="Enter your Password"
          onChange={this.onchange}
        />
        <br />
        <button type="submit" onClick={event => this.performLogin(event)}>
          Submit
        </button>
        <hr />
        State: {JSON.stringify(this.state)}
      </div>
    );
  }
}
export default Login;

import React，{Component}来自“React”；
类登录扩展组件{
建造师（道具）{
超级（道具）；
此.state={
电邮：“，
密码：“
};
this.onchange=this.onchange.bind（this）；
}
onchange（e）{
this.setState（{[e.target.name]：e.target.value}）；
}
performLogin=异步事件=>{
event.preventDefault（）；
变量体={
密码：this.state.password，
电子邮件：this.state.email
};
常量选项={
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”，
接受：“应用程序/json”
},
body:JSON.stringify（body）
};
const url=“/api/authenticate”；
试一试{
const response=等待获取（url、选项）；
const result=wait response.json（）；
控制台日志（结果）；
if（response.ok）{
console.log（“登录成功”）；
window.alert（“登录成功”）；
}否则{
console.log（“登录失败”）；
window.alert（“登录失败”）；
}
}捕获（错误）{
控制台错误（error）；
}
};
render（）{
返回(




此.performLogin（事件）}>
提交

状态：{JSON.stringify（this.State）}
);
}
}
导出默认登录；

但react应用程序中的这些修复还不够，因为codesandbox使用https，而登录api使用http。这将导致以下错误：

混合内容：已加载“”处的页面 通过HTTPS，但请求了不安全的资源 “http://***/api/authenticate”。这项请求已被批准 此 路 不通；内容必须通过HTTPS提供

解决这个问题的唯一方法似乎是对api使用https，如本文所述

---

您可以联系api所有者以使用https托管其api。

您是否在控制台中收到更多错误消息或任何状态代码？该问题可能是一个问题。不，只是typeError:无法获取。我仍然收到相同的错误typeError:无法使用更新的代码获取。@UbuntuNewb那么您还有其他cors问题。在api中启用cors后，此代码将起作用。@UbuntuNewb您在api中启用了cors吗？后端不启用。这项工作有个后台人员。在我将问题提交给他之前，我如何知道存在cors问题？@UbuntuNewb如果出现任何错误，请检查您的浏览器控制台。