0

I am working in react.js and node.js I use fetch API to get the data from my backend. but It shows the error which is

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

and the code of the login.js file is.

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

anyone can solve this problem or tell me why this error is occurring?I have added the whole code of the login.js file in which I find some errors but I can't solve it. so please tell me the issue to solve the problem.

lpizzinidev
  • 12,741
  • 2
  • 10
  • 29

1 Answers1

0

The error occurs because we use HTTPS protocol instead of HTTP. when you change the protocol then everything is fine.