React-Redux前端调用Django登录接口返回404且URL含undefined

• 核心原因是process.env.REACT_APP_API_URL环境变量取值为undefined，axios检测到请求路径不是完整的http/https开头的绝对路径时，会自动将路径和当前页面的域名路径拼接，你当前登录页面的路径是http://localhost:3000/account/开头，所以最终拼接出了http://localhost:3000/account/undefined/user/login的错误地址，触发404错误。
• 导致环境变量取值为undefined的常见场景：
  • .env文件存放位置错误，Create React App（CRA）要求环境变量配置文件必须放在项目根目录（和package.json同级），放在src等子目录下无法被识别。
  • 修改完.env文件后没有重启React开发服务器，CRA只会在服务启动时加载一次环境变量，运行过程中修改的配置不会自动生效。
  • 环境变量命名不符合规范，CRA只会自动注入以REACT_APP_为前缀的环境变量，前缀拼写错误的变量会被过滤。
  • .env文件内配置格式错误，比如给变量值加了多余的引号、存在多余空格。

1. 先确认环境变量取值：在auth.jsx的axios请求前添加打印代码console.log(process.env.REACT_APP_API_URL)，重启开发服务后查看控制台输出，确认变量值为undefined。
2. 调整.env文件位置到项目根目录，和package.json同级。
3. 修正.env内的配置格式，不要给变量值加引号，正确写法为：

REACT_APP_API_URL=http://localhost:8000

4. 完全停止当前运行的React开发服务，重新执行npm start或yarn start启动项目，加载最新的环境变量配置。
5. 验证修复效果：重新提交登录请求，查看控制台的请求地址是否变为预期的http://localhost:8000/user/login。
6. 补充问题修复：你当前的登录表单还有隐藏问题，两个Form.Control组件都没有添加name属性，onChange逻辑依赖e.target.name更新表单数据，没有name属性会导致提交的email和password始终为空，需要分别给邮箱输入框加name="email"、密码输入框加name="password"。

内容的提问来源于stack exchange，提问作者C-Bizz