React+Django路由问题：API请求路径错误如何修复？

这个问题我之前开发Django+React项目时也踩过坑，核心原因是你用了相对路径发起请求，而当前页面的URL是http://localhost:8000/profile/，浏览器会自动把相对路径拼在当前页面路径后面，就出现了/profile/api/profile/这种错误地址。下面给你几个靠谱的解决办法：

方法1：直接使用根路径开头的绝对URL #

这是最简单直接的方式，给API地址加上开头的斜杠/，让浏览器从域名根目录开始拼接路径：

fetch("/api/profile", requestOptions).then(..).then(..)

这样请求就会直接指向http://localhost:8000/api/profile/，完全符合你的需求。

方法2：在Django模板中注入全局基础URL（适配多环境） #

如果你的项目需要部署到不同域名的环境，硬写根路径不够灵活，可以在Django的模板里先注入当前站点的基础URL：
在Profile_temp_master.html的<head>标签里添加这段代码：

<script>
  // 从Django请求对象中获取当前站点的协议和域名
  const BASE_API_URL = "{{ request.scheme }}://{{ request.get_host }}/api/";
</script>

然后在React组件里用这个变量拼接请求地址：

fetch(`${BASE_API_URL}profile`, requestOptions).then(..).then(..)

这种方式不管是本地开发还是线上部署，都会自动适配当前环境的域名，不会出现路径错误。

方法3：配置React开发代理（开发环境专属） #

如果你是用Create React App这类脚手架开发React部分，还可以通过配置代理让开发时的API请求自动转发到Django后端：
在React项目的package.json里添加一行配置：

{
  // 其他配置...
  "proxy": "http://localhost:8000"
}

配置完成后，你在React里直接写fetch("/api/profile")，开发服务器就会自动把请求转发到Django的8000端口，而且生产环境部署时不需要修改这段代码（只要后端API路径保持一致）。

内容的提问来源于stack exchange，提问作者slick_reaper