Accessing Third-Party API Without CORS Error in SPFx Using Azure Function

When you try to call a third-party API directly from a SharePoint Framework (SPFx) web part, you may face the dreaded CORS (Cross-Origin Resource Sharing) error.
This article explains a clean and reliable fix using Azure Functions as a proxy layer—allowing your SPFx solution to fetch external data securely and without browser restrictions.

❌ The Problem

CORS errors appear when a browser blocks your SPFx code from accessing another domain that doesn’t explicitly allow your SharePoint tenant in its headers.

fetch("https://randomuser.me/api/")

This often fails with:

Access to fetch at 'https://randomuser.me/api/' from origin 'https://yourtenant.sharepoint.com' has been blocked by CORS policy...

✅ The Solution — Azure Function Proxy

Instead of calling the external API directly from the browser, you call your own Azure Function, which then fetches the data server-side and returns it to SPFx.
This avoids CORS issues completely and keeps your keys safe.

This approach works with any REST API, not just randomuser.me.

💡 Step-by-Step Guide

1. Create an Azure Function

Create an HTTP-triggered Azure Function (Node.js or C#). Here’s a simple JavaScript example:

module.exports = async function (context, req) {
  const fetch = require("node-fetch");
  const response = await fetch("https://randomuser.me/api/");
  const data = await response.json();

  context.res = {
    status: 200,
    body: data,
    headers: {
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*"
    }
  };
};

💡 You can later restrict origins or add authentication headers if needed.

2. Deploy to Azure

Use Visual Studio, VS Code, or Azure CLI to deploy the function.
In the Azure Portal:

• Enable the required deployment settings under Configuration
• Restart the Function App after updates
• Download the Publish Profile if deploying via Visual Studio

Once deployed, copy the function URL (for example):

https://yourfunction.azurewebsites.net/api/ProxyUserData

3. Configure CORS in Azure

In your Function App → CORS settings, add your SharePoint domain:

https://yourtenant.sharepoint.com

You can also use wildcards during development.

4. Update Your SPFx Code

Now call the Azure Function instead of the third-party API directly:

this.context.httpClient
  .get("https://yourfunction.azurewebsites.net/api/ProxyUserData", HttpClient.configurations.v1)
  .then(response => response.json())
  .then(data => {
    console.log("User Data", data);
  });

✅ The request now succeeds without any CORS errors.

🎥 Watch the Demo

For a full walkthrough, including deployment and live testing, watch the supporting video below:

🧩 GitHub Project

🎯 Summary

Using Azure Functions as a proxy is the most effective way to handle third-party API requests in SPFx:

• No CORS errors
• No exposed secrets
• Works across tenants and environments

It’s simple, secure, and scalable—ideal for production use in Microsoft 365.

🧠 Tip: This same pattern can also be used for translation, text-to-speech, or any custom AI integration in SharePoint.