Angular应用出现CORS错误如何解决？已配置Django全跨域仍报错

你遇到的这个错误核心原因不是Django的CORS配置问题，而是请求地址缺少协议前缀导致浏览器识别错误：

跨源请求仅支持以下协议方案：http、data、chrome-extension、edge、chrome-untrusted、https、isolated-app

你的请求地址写的是localhost:8000/supplier/，没有加上http://前缀，浏览器会把它视为非标准协议的地址，直接触发CORS拦截。

修复步骤： #

• 修正Angular中的API请求地址，确保完整包含http://前缀，比如将请求地址改为http://localhost:8000/supplier/。
• 建议在Angular的环境配置文件中统一管理API基础地址，避免重复出错：
  在src/environments/environment.ts中添加：

  export const environment = {
    production: false,
    apiBaseUrl: 'http://localhost:8000/'
  };
  

  之后发起请求时拼接路径：

  this.http.get(`${environment.apiBaseUrl}supplier/`);
  

• 最后确认Django的CORS配置（用django-cors-headers的话）：
  确保corsheaders在INSTALLED_APPS和MIDDLEWARE中正确配置，并且CORS_ALLOW_ALL_ORIGINS = True（或指定CORS_ALLOWED_ORIGINS = ["http://localhost:4200"]），不过这一步只是兜底，核心问题还是请求地址的协议前缀。

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