Angular调用PythonAnywhere API遭CORS拦截，求解决方案

一、搞定CORS策略拦截问题 #

• 先把django-cors-headers的配置做对：
  1. 在PythonAnywhere的虚拟环境里装包：pip install django-cors-headers
  2. 打开settings.py，按下面的要求修改：

     INSTALLED_APPS = [
         # 其他已有的应用
         'corsheaders',
     ]
     
     MIDDLEWARE = [
         'corsheaders.middleware.CorsMiddleware',  # 这个必须放在CommonMiddleware前面，顺序错了没用
         'django.middleware.common.CommonMiddleware',
         # 其他中间件
     ]
     
     # 只允许本地Angular的地址跨域，别随便开全量
     CORS_ALLOWED_ORIGINS = [
         "http://localhost:4200",
     ]
     
     # 如果请求需要自定义头或特殊方法，再开下面两个（按需启用）
     # CORS_ALLOW_ALL_HEADERS = True
     # CORS_ALLOW_ALL_METHODS = True
     

• 验证配置是否生效：在本地终端执行curl -I https://你的PythonAnywhere域名.com/api/你的接口路径，查看响应头里是否包含Access-Control-Allow-Origin: http://localhost:4200
• 别忘了重启PythonAnywhere应用：改完settings.py后，必须去PythonAnywhere的Web管理页点击"Reload"，否则配置不会生效

二、解决504网关超时问题 #

• 先排查API本身能不能正常访问：在PythonAnywhere的Web页点击"Go to website"，直接访问API的完整路径（比如https://你的域名.com/api/test），如果直接访问也超时，问题出在API或PythonAnywhere配置：
  • 查看PythonAnywhere的日志：去Web页的"Logs"标签找错误信息，定位是数据库查询过慢、代码中有耗时操作，还是资源配额不足
  • 优化API代码：如果是处理大数据或计算密集型逻辑，要么拆分接口，要么将耗时操作改成异步（免费版Celery支持有限，实在不行就简化逻辑），减少单次请求的压力
  • 注意PythonAnywhere的资源限制：免费版CPU和内存配额有限，若请求占用资源过高会被系统强制终止，可考虑升级付费版或优化代码
• 如果API直接访问正常，但Angular调用超时：
  • 检查Angular里的请求URL：别拼错域名、接口路径，还要注意HTTP/HTTPS协议必须和PythonAnywhere的配置一致
  • 调整Angular的超时设置：在python-anywhere.service.ts里添加合理的超时时间，比如：

    import { HttpClient } from '@angular/common/http';
    import { Injectable } from '@angular/core';
    import { timeout } from 'rxjs/operators';
    
    @Injectable({
      providedIn: 'root'
    })
    export class PythonAnywhereService {
      private apiUrl = 'https://你的PythonAnywhere域名.com/api';
    
      constructor(private http: HttpClient) { }
    
      getData() {
        return this.http.get(`${this.apiUrl}/data`).pipe(
          timeout(10000) // 设置10秒超时，可根据实际情况调整
        );
      }
    }
    

  • 测试本地网络：用浏览器直接打开API地址，看能否正常加载，排除本地网络连通性问题

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