React中Axios POST请求CORS报错，Django配置无效求助

嘿，这个问题我之前帮人排查过好几次，核心原因是你搞混了CORS请求头和响应头的作用！咱们一步步来解决：

1. 移除前端错误的请求头 #

你在Axios请求里添加的Access-Control-Allow-Origin和Access-Control-Allow-Credentials根本不是前端该发的请求头——这两个是后端返回给浏览器的响应头，用来告诉浏览器允许哪个源跨域访问，以及是否允许携带凭证。

修正后的前端代码应该是这样的：

axios.post('https://api.aaa.com/aaa/login/', userlogin, { 
  headers: { 
    'Content-Type': 'application/json' 
  },
  withCredentials: true // 只有当你需要传递cookie等凭证时才加这个，对应后端的CORS_ALLOW_CREDENTIALS配置
})

2. 修正Django的CORS配置 #

你的CORS_ORIGIN_WHITELIST里的地址多了个末尾的斜杠，这会导致匹配失败。把斜杠去掉：

CORS_ALLOW_CREDENTIALS = True 
CORS_ORIGIN_WHITELIST = ['http://0.0.0.0:3000']  # 移除末尾的"/"

为什么会出现这个错误？ #

浏览器发送跨域请求前会先发起一个OPTIONS预检请求，询问后端是否允许当前源、请求头、请求方法等。你前端把Access-Control-Allow-Origin当成请求头发送，后端的CORS配置里并没有允许这个头作为合法的请求头，所以浏览器就抛出了这个错误——毕竟这个头的职责是后端用来回应浏览器的，不是前端用来“命令”后端的😉

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