React调用Django详情接口报CORS跨域错误，列表接口正常如何解决

错误原因 #

这个问题的核心是Django默认开启APPEND_SLASH配置，当请求的路由没有以斜杠结尾、且和现有路由不匹配时，会自动返回302重定向到带斜杠的路由，而重定向响应默认不会携带CORS跨域头，因此触发跨域报错。你调用列表接口时地址带尾部斜杠/api/todos/匹配路由规则，因此正常，详情接口地址不带斜杠/api/todos/14触发重定向，因此报错。

为什么POSTMAN/Chrome直接访问正常？ #

POSTMAN和直接在Chrome地址栏输入地址访问的场景，不属于跨域请求的校验范围，浏览器不会校验响应的CORS头，因此重定向后可以正常拿到数据，只有前端异步XMLHttpRequest/Fetch请求才会触发CORS校验规则。

解决方法 #

• 方法1：修正请求地址，补充尾部斜杠
  修改ProductDetail.js中的请求代码，在路径末尾添加斜杠即可直接匹配路由，避免触发重定向：

const [detailItems, setDetailsItems] = useState([]);
useEffect(() => {
    // 末尾添加斜杠，匹配Django路由规则
    axios.get("http://127.0.0.1:8000/api/todos/14/").then((res) => {
       console.log(res);
    });
}, []);

• 方法2：（可选）配置Django允许跨域重定向
  如果不想统一调整前端请求地址，可以在Django settings.py中添加如下配置，让重定向响应也携带CORS头：

# settings.py新增配置
CORS_ALLOW_REDIRECTS = True

• 补充优化：如果后续出现其他跨域异常，可以在跨域白名单中同步添加127.0.0.1的本地地址，避免域名匹配问题：

CORS_ORIGIN_WHITELIST = [
    'http://localhost:3000',
    'http://127.0.0.1:3000'
]

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