通过 Office Scripts Fetch 调用 API 时出现 CORS 问题

Posted 2023-03-04

【中文标题】通过 Office Scripts Fetch 调用 API 时出现 CORS 问题

【英文标题】：CORS issue when calling API via Office Scripts Fetch

【发布时间】：2021-12-14 01:38:00

【问题描述】：

我正在尝试通过 Office 脚本（获取）对我创建的公开可用的基于 Azure 函数的 API 进行 API 调用。根据政策，我们需要为 Azure Functions 启用 CORS。我已经尝试了所有我能想到的域，但除非我允许所有来源，否则我无法接到工作电话。我试过了：

https://ourcompanydoamin.sharepoint.com https://usc-excel.officeapps.live.com https://browser.pipe.aria.microsoft.com https://browser.events.data.microsoft.com

第一个是我尝试从中执行的 Excel Online 域，其余的是在 Chrome 的“网络”选项卡中运行脚本期间出现的。 office Scripts 中的错误消息并没有像 Chrome 控制台那样告诉我请求来自哪个域。我需要什么主机才能让 Office 脚本能够调用我的 API？

【参考方案1】：

对此的预期 CORS 设置为：https://*.officescripts.microsoftusercontent.com。

但是，Azure Functions CORS 目前不支持通配符子域。如果您尝试使用通配符子域设置来源，您将收到以下错误：

一种可能的解决方法是在 Azure Functions 代码中显式维护“允许列表”。这是一个概念验证实现（假设您将 node.js 用于您的 Azure Functions）：

module.exports = async function (context, req) 

    // List your allowed hosts here. Escape special characters for the regular expressions.
    const allowedHosts = [
        /https\:\/\/www\.myserver\.com/,
        /https\:\/\/[^\.]+\.officescripts\.microsoftusercontent\.com/
    ];

    if (!allowedHosts.some(host => host.test(req.headers.origin))) 
        context.res = 
            status: 403, /* Forbidden */
            body: "Not allowed!"
        ;
        return;
    

    // Handle the normal request and generate the expected response.

    context.res = 
        status: 200,
        body: "Allowed!"
    ;

请注意：

需要正则表达式来匹配动态子域。 为了在代码中进行来源检查，您需要在 Functions CORS 设置页面上将 * 设置为 Allowed Origins。

或者，如果您想使用 ASP.NET Core 构建您的服务，您可以执行以下操作：https://***.com/a/49943569/6656547。

【讨论】：

感谢您提供的信息！为了澄清，我会在功能设置中使用这个代替 CORS 设置吗？所以我在 Azure 中设置的所有其他主机，我需要将其复制到 allowedHosts 中，如此处所示？另外，如果我理解正确，我会让我的代码在这个 IF 语句中生成响应吗？或者如果我得到一个不允许的主机并将我的其余代码保留在 IF 语句之外，return 会更好。

是的，完全正确！因此，您无需在函数 CORS 设置页面中配置主机列表，而是在函数代码中执行此操作。而且我更喜欢您的代码结构 - 尽早返回不常见或不利的情况以避免大的 if...else 块。这实际上是一种非常好的编码风格，称为“保护子句”?。我将更新我的答案以应用此模式。谢谢！