使用Django作为Ionic应用后端时遭遇CORS错误求助

看起来你遇到的核心问题是自定义请求头未被CORS策略允许，导致预检请求失败，进而引发后续的请求错误。咱们一步步来解决：

问题根源分析 #

你在Ionic的请求里添加了自定义的username和password请求头，但默认情况下django-cors-headers并不会自动允许这些非标准的HTTP头。浏览器发起跨域请求前会先发送OPTIONS预检请求，检查后端是否允许这些自定义头，当发现password不在允许列表里时，就会拦截请求，抛出你看到的第一个错误；第二个错误则是预检失败后的连锁结果。

解决方案：配置Django允许自定义请求头 #

在你的Django项目的settings.py里，添加以下配置来允许自定义头：

# 直接定义允许的所有请求头，包含你自定义的字段
CORS_ALLOW_HEADERS = [
    "accept",
    "accept-encoding",
    "authorization",
    "content-type",
    "dnt",
    "origin",
    "user-agent",
    "x-csrftoken",
    "x-requested-with",
    # 追加你用到的两个自定义头
    "username",
    "password",
]

或者更简洁的方式，在默认允许的头集合基础上追加：

from corsheaders.defaults import default_headers

CORS_ALLOW_HEADERS = default_headers + (
    'username',
    'password',
)

修改完成后，记得重启你的Apache服务器，让新的配置生效。

额外的优化建议 #

还有个小提醒：你现在把username和password放在每个GET请求的头里，其实更安全规范的做法是只在获取JWT Token的POST请求（/api-token）中传递这些凭证，后续的API请求只需要携带Authorization: Bearer <token>就足够验证身份了。这样既减少了敏感信息的暴露次数，也能避免不必要的自定义头带来的CORS问题。

调整后的fetchMovies代码可以改成这样：

fetchMovies() {
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${this.authService.getToken()}`,
    })
  }
  return this.http.get(this.url, httpOptions).pipe(tap(resData => {
    console.log(resData);
  }));
}

如果业务上确实需要每次请求都携带这两个头，保持前面的CORS配置即可。

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