1

I am trying to make an API call via Office Scripts (fetch) to a publicly available Azure Function-based API I created. By policy we need to have CORS on for our Azure Functions. I've tried every domain I could think of, but I can't get the call to work unless I allow all origins. I've tried:

The first is the Excel Online domain I'm trying to execute from, and the rest came up during the script run in Chrome's Network tab. The error message in office Scripts doesn't tell me the domain the request is coming from like it does from Chrome's console. What host do I need to allow for Office Scripts to be able to make calls to my API?

billoverton
  • 2,705
  • 2
  • 9
  • 32

1 Answers1

3

The expected CORS settings for this is: https://*.officescripts.microsoftusercontent.com.

However, Azure Functions CORS doesn't support wildcard subdomains at the moment. If you try to set an origin with wildcard subdomains, you will get the following error:

Azure Functions CORS doesn't support wildcard subdomains

One possible workaround is to explicitly maintain an "allow-list" in your Azure Functions code. Here is a proof-of-concept implementation (assuming you use node.js for your 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!"
    };
}

Please note:

  • Regular expressions are needed to match the dynamic subdomains.
  • In order to do the origin check within the code, you'll need to set * as the Allowed Origins on your Functions CORS settings page.

Or if you want to build you service with ASP.NET Core, you can do something like this: https://stackoverflow.com/a/49943569/6656547.

Yutao Huang
  • 1,503
  • 1
  • 13
  • 25
  • Thank you for the information! To clarify, I would use this IN PLACE OF the CORS settings in the Function settings? So all of the other hosts I have set up in Azure, I would need to replicate that into the `allowedHosts` as shown here? Also, if I understand correctly I would have my code to generate the response within this IF statement? Or would it be better to `return` if I get a host that is not allowed and keep the rest of my code out of the IF statement. – billoverton Nov 03 '21 at 14:27
  • 1
    Yes, that's exactly right! So instead of configuring the host list in the Functions CORS settings page, you do that in your function code. And I like your code structure better - return early for uncommon or unfavorable cases to avoid big `if...else` blocks. This is actually a very good coding style called "Guard Clauses" . I'll update my answer to apply this pattern. Thanks! – Yutao Huang Nov 03 '21 at 16:31