【解决办法】 json-server login 404 的问题

来源：5-1 用React表单、TS的类型继承和鸭子类型实现登录表单

辰辰ollie

2021-07-13

【解决办法】增加了middlewares后启动json-server，LoginScreen.tsx里请求/login 输入用户名密码依旧404的问题。这里我也碰到了，看了视频敲了一遍，感觉代码都写对了，最后还是404.
这里有几个解决办法：
1 清楚浏览器缓存
2 更换json-server 的端口（比如原来用3001 现在改成3002试试）
我就是改了个端口然后重启就好了，不知道为啥。
另外代码我都贴出来，我看卡在这里的人挺多的！希望对大家有帮助！

//LoginScreen.tsx
import { FC, FormEvent, ReactElement } from 'react';

interface IProps {}
interface Iparams {
  username: string;
  password: string;
}
const apiUrl = process.env.REACT_APP_API_URL;
export const LoginScreen: FC<IProps> = (): ReactElement => {
  const loginMethod = (params: Iparams) => {
    fetch(`${apiUrl}/login`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(params),
    }).then(async (res) => {
      if (res.ok) {
        let data = await res.json();
        console.log(data);
      }
    });
  };
  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const username = (event.currentTarget.elements[0] as HTMLInputElement)
      .value;
    const password = (event.currentTarget.elements[1] as HTMLInputElement)
      .value;
    loginMethod({ username, password });
  };
  return (
    <>
      <div style={{ width: '800px', margin: '0 auto' }}>
        <form onSubmit={handleSubmit}>
          <div>
            <label htmlFor={'username'}>用户名</label>
            <input type="text" id={'username'} />
          </div>
          <div>
            <label htmlFor={'password'}>密码</label>
            <input type="password" id={'password'} />
          </div>
          <button type={'submit'}>登录</button>
        </form>
      </div>
    </>
  );
};

module.exports = (req, res, next) => {
  console.log(req.body); //如果404了，输出检查看看控制台里输出什么
  if (req.method === 'POST' && req.path === '/login') {
    if (req.body.username === 'ollie' && req.body.password === '123') {
      console.log(req.body.username);
      console.log(req.body.password);
      return res.status(200).json({
        user: {
          token: '123',
        },
      });
    } else {
      return res.status(400).json({
        messages: '用户名或密码错误',
      });
    }
  }
  next();
};