Access to XMLHttpRequest at from origin ‘https://.sharepoint.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Issue:

So i was working on trying to make a post request, which was hosted on Azure Funciton Apps, from from Microsof Teams. So i came across with following error

Access to XMLHttpRequest at <URL> from origin ‘https://<tenant&gt;.sharepoint.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

1w2

My solution comprises of following bits

  1. Azure Funciton Apps
  2. Teams

One point to note over here in my case, my function app hosted on different tenant and teams application is hosted on other tenant. Furthermore i have registered Azure Function App in teams application tenant.

After digging in bit deep, i found out in the App Registration there is a settings for

1w1

As i mentioned above my Function App hosted on different Azure directory, once i chose the the other option (multitenant one). it resolved the issue.

Update (20/11/2019)

Well it seems that above update doesnt resolve the issue itself.  There is CORS settings in the App settings for Azure Function.  Once you provide the url, access this Azure Functions in the Allowed Origins, plus the request credentials based on how you setup the credential. 

You can skip the above setting, you can setup the request with the following settings, Following is the example to enable CORS from the NodeJS Azure Functions 

module.exports = async function (context, req) {
    context.log('JavaScript HTTP trigger function processed a request.');
    

    if (req.query.email || (req.body && req.body.email)) {

        const htmttosend="<htmlL><body><script> (function () {  window.parent.window.postMessage({ data: { message :'"+req.query.email+"' } },'*'); })(); </script></body></html>";

        context.res = {
            // status: 200, /* Defaults to 200 */
            
            body: htmttosend,
             headers: {
                            'Content-Type': 'text/html',
                            'Access-Control-Allow-Origin' : 'https://tenanturl.sharepoint.com',
                            'Access-Control-Allow-Methods' : 'GET,POST',
                            'Access-Control-Allow-Headers' : 'Content-Type, Set-Cookie',
                            'Access-Control-Allow-Credentials':'true',
                            'Access-Control-Max-Age' : '86400'
                       }
        };
    }
    else {
        context.res = {
            status: 400,
            body: "Please pass a name on the query string or in the request body",
            headers: {
                            'Content-Type': 'application/json',
                            'Access-Control-Allow-Origin' : 'https://tenanturl.sharepoint.com',
                            'Access-Control-Allow-Methods' : 'GET,POST',
                            'Access-Control-Allow-Headers' : 'Content-Type, Set-Cookie',
                            'Access-Control-Allow-Credentials':'true',
                            'Access-Control-Max-Age' : '86400'
                       }
            
        };
    }
};

  Happy teaming! 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s