Azure Function配置CORS时如何添加mytestwebsite.com的所有子域名

问题原因 #

Azure Portal 可视化CORS配置页面对域名格式做了严格限制，不支持直接填写带*通配符的子域名规则，因此你输入https://*.mytestwebsite.com时会触发格式报错。

解决方案 #

方案1：通过Azure CLI/ARM模板配置（推荐） #

Azure Function底层资源配置本身是支持通配子域名规则的，只是门户UI做了限制，你可以通过Azure CLI命令直接添加规则：

az functionapp cors add \
  --name <你的函数应用名称> \
  --resource-group <所属资源组名称> \
  --allowed-origins https://*.mytestwebsite.com

执行完成后规则即时生效，回到门户CORS配置页可以看到规则已被添加，不会再触发格式报错。

方案2：代码层面自定义CORS逻辑 #

如果你需要更灵活的匹配规则（比如支持多级子域名、带端口的子域名），可以关闭门户CORS配置，在函数代码中手动处理CORS头部：

1. 先清空Azure门户CORS配置页的所有已有条目，避免配置冲突
2. 在函数代码中判断请求Origin是否匹配子域名规则，匹配成功则返回对应的CORS头部，示例（Node.js环境）：

module.exports = async function (context, req) {
    const origin = req.headers.origin || '';
    const resHeaders = {};
    // 匹配所有mytestwebsite.com的子域名，支持带端口的场景
    const isAllowedOrigin = /^https:\/\/[a-zA-Z0-9-]+\.mytestwebsite\.com(:\d+)?$/.test(origin);

    if (isAllowedOrigin) {
        resHeaders['Access-Control-Allow-Origin'] = origin;
        resHeaders['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE, OPTIONS';
        resHeaders['Access-Control-Allow-Headers'] = 'Content-Type, Authorization';
    }

    // 处理OPTIONS预检请求
    if (req.method === 'OPTIONS') {
        context.res = { status: 200, headers: resHeaders };
        return;
    }

    // 正常业务逻辑处理
    context.res = {
        status: 200,
        headers: resHeaders,
        body: '业务响应内容'
    };
}

注意事项 #

• 通配子域名规则仅支持https://*.domain.com这种单级通配格式，不支持https://*.*.domain.com多级通配
• 两种方案二选一即可，不要同时配置门户CORS和代码自定义CORS，否则会出现头部重复导致CORS失效

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