React调用Django后端部分接口报CORS跨域错误该如何修复？

• 你看到的CORS报错属于假跨域提示：当请求后端不存在的路由时，Django返回的404/400等错误响应默认不会附加CORS头，浏览器就会抛出跨域拦截错误，实际根源是前端请求的URL不符合后端路由规则，并非CORS配置本身完全失效。
• 从报错的请求地址https://.api.example.co/blog/undefined可看出两个明确的前端参数错误：
  1. 单篇文章接口的slug变量未正确赋值，导致请求路径尾部出现undefined，和后端预设的路由规则不匹配
  2. 环境变量process.env.REACT_APP_API_URL配置错误，生成的域名前缀多了一个.，变为.api.example.co，该域名不在你配置的CORS允许源列表中
• Postman测试正常是因为手动输入了正确的请求路径和域名，没有触发上述参数错误，后端接口本身的逻辑是正常的。
• 你的Django配置存在拼写错误：CORS_REPLACE_HTTPS_REFFERER正确写法为CORS_REPLACE_HTTPS_REFERRER，少了一个字母R，不过这个不是本次问题的核心诱因。

• 前端侧修复
  1. 校验slug变量的赋值逻辑，确保调用单篇文章接口时，slug已经从路由参数/页面状态中正确获取，避免出现undefined
  2. 修正process.env.REACT_APP_API_URL的配置值，去掉多余的前缀.，确保生成的API域名为https://api.example.co而非异常的.api.example.co
  3. 如果你的API部署在api.example.co域名下，需要将该域名补充到Django的CORS_ALLOWED_ORIGINS和CORS_ORIGIN_WHITELIST列表中
• 后端侧修复
  1. 修正配置拼写错误：将CORS_REPLACE_HTTPS_REFFERER改为CORS_REPLACE_HTTPS_REFERRER
  2. 确认corsheaders.middleware.CorsMiddleware在MIDDLEWARE列表中的顺序是最靠前的，必须放在django.middleware.common.CommonMiddleware之前，否则会导致CORS头无法正确附加到正常响应中
• 验证步骤：修改完成后先在浏览器控制台的网络面板查看请求的目标URL是否符合预期，确认没有undefined和多余的域名前缀后再测试接口调用。

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