CORS Error When Accessing External API in React SPFx Web Part

Question

I am trying to access an external API (https://external/admin/api/get_users) from my React SPFx web part, but I encounter the following CORS error:

"Access to fetch at 'https://external/api/get_users' from origin 'https://mysite.sharepoint.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status."

What steps can I take to resolve this issue? Are there specific configurations I need to adjust in my SPFx web part or on the API side to allow this request?

Answer 1

Hi @Pravesh Kumar,

The supported way to authenticate SharePoint framework components to a custom API is by using Azure Active Directory (AAD) and OAuth.

You need to AAD-protect your API. You can configure it so it supports two authentication mechanisms: AAD and your current authentication method. For example, if a JWT token is present, you use AAD+OAuth, and if not you use your other authentication method.

The SPFx to API authentication mechanism is described in details in the page Connect to Azure AD-secured APIs in SharePoint Framework solutions.

In summary, you will need the following elements:

• Register an application in Azure AD, which represents your API.
• Use a server library to protect your API with that AAD application.
• Configure your SPFx package so it has permissions to query your API.
• Grant the permissions to your SPFx package in the SharePoint central administration.
• Use the AadHttpClient in your web part to access your API.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.