如何为AppScript的POST请求响应添加HTTP Header以解决CORS问题

直接在响应字典中添加headers字段通常不会生效，因为后端框架需要通过特定API来设置HTTP响应头，以下是几种常见后端环境的正确做法：

1. Flask 框架 #

from flask import Flask, make_response

app = Flask(__name__)

@app.route('/your-api')
def your_api():
    response = make_response(your_response_data)
    # 设置CORS头
    response.headers['Access-Control-Allow-Origin'] = '*'  # 生产环境建议指定具体域名
    response.headers['Access-Control-Allow-Methods'] = 'GET, POST, OPTIONS'
    response.headers['Access-Control-Allow-Headers'] = 'Content-Type'
    return response

更简便的方式可使用官方推荐的flask-cors扩展：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 全局启用CORS，也可针对单个路由配置

@app.route('/your-api')
def your_api():
    return your_response_data

2. Django 框架 #

视图中直接设置 #

from django.http import JsonResponse

def your_api(request):
    response = JsonResponse(your_response_data)
    response['Access-Control-Allow-Origin'] = '*'
    response['Access-Control-Allow-Methods'] = 'GET, POST, OPTIONS'
    response['Access-Control-Allow-Headers'] = 'Content-Type'
    return response

使用第三方包简化配置 #

1. 安装包：pip install django-cors-headers
2. 在settings.py中配置：

INSTALLED_APPS = [
    # ...
    'corsheaders',
]

MIDDLEWARE = [
    # 注意顺序，需放在CommonMiddleware之前
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
]

# 允许所有域名（生产环境替换为具体域名列表）
CORS_ALLOW_ALL_ORIGINS = True

3. Node.js/Express 框架 #

const express = require('express');
const app = express();

// 全局中间件设置CORS头
app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    // 处理OPTIONS预检请求
    if (req.method === 'OPTIONS') {
        return res.sendStatus(200);
    }
    next();
});

app.get('/your-api', (req, res) => {
    res.json(your_response_data);
});

也可使用cors包简化：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());  // 全局启用CORS

app.get('/your-api', (req, res) => {
    res.json(your_response_data);
});

关键注意点 #

• 生产环境不要用*作为允许的Origin，应指定具体前端域名，比如https://your-frontend.com
• 带自定义头、PUT/DELETE等复杂请求会触发浏览器OPTIONS预检请求，后端需正确响应
• 不要依赖在响应字典中添加headers字段的方式，必须使用框架提供的响应对象API设置头

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