类型错误:无法在 reactjs 登录页面中获取

Question

我一直在尝试创建一个登录页面，但我收到一个名为"TypeError: Failed to fetch"的错误。我不知道我哪里做错了，我检查了一些 StackOverflow 答案，就像我尝试添加event.preventdefault一样，因为我在 StackOverflow 答案之一中看到，但这没有帮助。

有人可以指出我做错的部分吗？

另请注意：它在带有 API 的邮递员中工作正常。我在那里尝试了相同的电子邮件和密码，它在邮递员中工作正常，但在反应网站上出现错误。

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;

一个缺点是，在邮递员中，只有当我像下面显示的那样发布时，它才会接受

{
"password":"pass",
"email":"admin"
}

如果我删除引号，那么它会在邮递员中给我错误的字符串错误 但是在代码沙箱中，当我保存沙箱时，引号会自动删除。可能是因为这个还是没什么好担心的？

Answer 1

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

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

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

因此，对于所有这些更改，您的组件代码必须如下所示：

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;

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

混合内容："https://hkj22.csb.app/Login"页面已加载 通过 HTTPS，但请求了不安全的资源 'http：//***/api/authenticate'.此请求已 封锁;内容必须通过 HTTPS 提供。

解决此问题的唯一方法似乎是使用 https 作为 api，如本答案中所述。

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