Angular对接Flask应用如何解决POST请求CORS跨域错误

你遇到的是跨域资源共享（CORS）的预检请求校验问题，GET请求属于简单请求不需要预检，POST请求如果携带非表单格式 payload 或者自定义请求头时，浏览器会先发送OPTIONS类型的预检请求校验服务端跨域权限，你的Flask服务目前没有正确处理这类请求，所以会触发报错，可按以下步骤解决：

步骤1：安装Flask官方CORS扩展 #

执行以下命令安装Flask-CORS，无需手动编写响应头逻辑：
pip install flask-cors

步骤2：配置Flask服务的CORS规则 #

有两种配置方案可按需选择：

• 开发环境快速配置（允许所有来源访问）
  在Flask应用初始化位置直接启用全局CORS即可，示例代码：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
# 全局开启跨域权限
CORS(app)

# 你的接口定义
@app.route('/your-api-path', methods=['POST'])
def your_post_handler():
    # 业务逻辑代码
    pass

• 生产环境安全配置（仅允许Angular前端地址访问）
  把CORS的origins参数指定为你的Angular服务运行地址即可，比如Angular默认运行在http://localhost:4200：
  CORS(app, origins=["http://localhost:4200"])
  如果只需要给特定接口放开跨域权限，也可以单独给接口加装饰器：

@app.route('/your-api-path', methods=['POST'])
@cross_origin(origins=["http://localhost:4200"])
def your_post_handler():
    # 业务逻辑代码
    pass

步骤3：异常排查 #

配置完成重启Flask服务后如果仍然报错，可检查两个配置点：

• 如果你手动指定了接口支持的请求方法，要确保包含OPTIONS方法：@app.route('/your-api-path', methods=['POST', 'OPTIONS'])
• 如果Angular请求携带了自定义请求头，需要在CORS配置中通过allow_headers参数放开对应的头字段权限

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