使用XMLHttpRequest发送application/json请求至GCF时出现KeyError: 'CONTENT_TYPE'

1. 确认XHR的请求数据与头设置顺序 #

确保你的XHR代码满足以下要求：

• 调用xhr.open()之后再设置Content-Type头
• 发送的数据是经过JSON.stringify()序列化后的字符串，而非原始JavaScript对象

示例正确代码：

const xhr = new XMLHttpRequest();
xhr.open('POST', '你的GCF函数URL');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
  // 处理响应逻辑
};
const data = { key: 'value' };
xhr.send(JSON.stringify(data));

如果直接发送对象而非字符串，浏览器可能会自动修改请求头，导致GCF无法识别正确的CONTENT_TYPE。

2. 检查GCF的CORS配置 #

从浏览器前端发送请求时会触发OPTIONS预请求，如果GCF没有正确处理OPTIONS请求，可能导致后续POST请求的头信息被截断或无法传递。

Python版GCF处理示例： #

def your_function(request):
    if request.method == 'OPTIONS':
        headers = {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'POST',
            'Access-Control-Allow-Headers': 'Content-Type'
        }
        return ('', 204, headers)
    
    # 原有POST请求处理逻辑
    if request.content_type == 'application/json':
        data = request.get_json()
        # 数据处理逻辑
        return jsonify({'status': 'success'})

Node.js版GCF处理示例： #

exports.yourFunction = (req, res) => {
  if (req.method === 'OPTIONS') {
    res.set('Access-Control-Allow-Origin', '*');
    res.set('Access-Control-Allow-Methods', 'POST');
    res.set('Access-Control-Allow-Headers', 'Content-Type');
    res.status(204).send('');
  } else {
    // 原有POST请求处理逻辑
    const data = req.body;
    res.json({ status: 'success' });
  }
};

3. 验证请求头的实际发送情况 #

用浏览器开发者工具（Network面板）检查：

• 确认Content-Type头确实是application/json
• 查看Request Payload是否为正确的JSON格式
• 检查OPTIONS请求的响应头是否包含Access-Control-Allow-Headers: Content-Type

如果OPTIONS响应缺少这个头，浏览器会阻止后续POST请求发送正确的Content-Type头，导致GCF无法识别并抛出KeyError: 'CONTENT_TYPE'。

4. 检查GCF函数的请求头读取逻辑 #

确认函数代码中是从请求对象而非环境变量读取CONTENT_TYPE。比如Python中应使用request.content_type而非os.environ['CONTENT_TYPE']，Node.js中使用req.get('Content-Type')而非直接读取环境变量。你用Python脚本发送正常说明这部分大概率没问题，但仍可快速确认。

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