如何修复从数据库中获取数据时的错误

Question

我在react.js和node.js工作，我使用fetch API从我的后端获取数据。但是它显示的错误是

TypeError: Failed to fetch
at submit (Login.js:11:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070:1)
at executeDispatch (react-dom.development.js:8243:1)
at processDispatchQueueItemsInOrder (react-dom.development.js:8275:1)
at processDispatchQueue (react-dom.development.js:8288:1)
at dispatchEventsForPlugins (react-dom.development.js:8299:1)
at react-dom.development.js:8508:1

，login.js文件代码为。

import React from 'react';
import { useState } from 'react';
import logo from '../images/logo.png';
export default function Login() {
const [credentials, setCredentials] = useState({ email: '', password: '' });
const submit = async (e) => {
e.preventDefault();
try {
const response = await fetch(`https://localhost:3000/api/user/login`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: credentials.email,
password: credentials.password,
}),
});
const json = await response.json();
console.log('data is ', json);
} catch (err) {
console.log(err);
}
};
const onchange = (e) => {
setCredentials({ ...credentials, [e.target.name]: e.target.value });
};
return (
<div className='loginBack '>
<div className='row login_container shadow-lg p-3 mb-5  rounded d-flex align-items-center'>
<div className='col-lg-4 '>
<img src={logo} width='200' alt='yourguide.pk' />
</div>
<div className='col-lg-4 container login text-light '>
<h3>Welcome</h3>
<form className='my-2' onSubmit={submit}>
<div className='form-group'>
<input
type='email'
className='form-control'
name='email'
onChange={onchange}
value={credentials.email}
id='email'
placeholder='Enter email'
/>
</div>
<div className='form-group my-3'>
<input
type='password'
className='form-control'
id='password'
onChange={onchange}
value={credentials.password}
name='password'
placeholder='Password'
/>
</div>
<button className='btn btn-none '>
<small>Forgotten Passowrd ?</small>
</button>
<button type='submit' className='btn btn-primary form-control my-2'>
Login
</button>
</form>
<strong>Conntinue with</strong>
<div className='row'>
<div className='col-lg-6 my-2'>
<button className='btn btn-dark form-control'>Facebook</button>
</div>
<div className='col-lg-6 my-2'>
<button className='btn btn-dark form-control'>Gmail</button>
</div>
</div>
</div>
</div>
</div>
);
}

谁能解决这个问题或告诉我为什么这个错误发生?我已经添加了login.js文件的整个代码，其中我发现了一些错误，但我无法解决。所以请告诉我是什么问题来解决这个问题。

Answer 1

错误发生是因为我们使用HTTPS协议而不是HTTP。当您更改协议时，一切都很好。