CORS (Cross-Origin Resource Sharing) Error in SharePoint – Causes, Fixes, and Best Practices

Overview

CORS (Cross-Origin Resource Sharing) errors occur in SharePoint when a script or API request tries to access resources from a different domain but is blocked by the browser due to security policies.

This happens when:

• SharePoint calls an external API/service (e.g., REST API, Graph API).
• An external app tries to access SharePoint resources from another domain.
• API responses lack proper CORS headers.

This guide provides detailed troubleshooting steps, fixes, and best practices.

---

1. Understanding CORS in SharePoint

What is CORS?

CORS is a security feature in browsers that restricts web pages from making requests to a different domain than the one that served the web page.

For example:

• A SharePoint page (https://yourcompany.sharepoint.com)
• Tries to fetch data from an external API (https://api.example.com)
• The request fails if the external API does not allow CORS.

Common Scenarios of CORS Errors in SharePoint

Scenario	Description	Example
Calling External APIs from SharePoint	SharePoint requests data from a third-party service that does not allow CORS.	Fetching data from https://api.example.com.
Accessing SharePoint APIs from External Apps	An external app tries to fetch SharePoint data but is blocked by CORS policy.	A React app hosted on https://myapp.com calls https://yourcompany.sharepoint.com/_api/web.
Power Automate or PowerApps Integration	API calls from Power Automate or PowerApps fail due to CORS restrictions.	Connecting PowerApps to a non-Microsoft API.

---

2. Identifying CORS Errors in SharePoint

A. Check Browser Console for Errors

1. Open Google Chrome/Edge.
2. Press F12 to open Developer Tools.
3. Go to the Console tab.
4. Look for errors like: Access to fetch at 'https://api.example.com' from origin 'https://yourcompany.sharepoint.com' has been blocked by CORS policy.
5. If you see this, the external service does not allow SharePoint as an origin.

B. Check Network Tab for Blocked Requests

1. In Developer Tools, go to the Network tab.
2. Look for failed API requests.
3. Click on a failed request and check the Response Headers.
4. If Access-Control-Allow-Origin is missing or incorrect, it is a CORS issue.

---

3. Common Causes of CORS Errors

1. External API does not allow SharePoint’s origin (https://yourcompany.sharepoint.com).
2. SharePoint API is accessed from an unauthorized domain.
3. Missing CORS headers (Access-Control-Allow-Origin) in API responses.
4. API requires authentication (Bearer Token, OAuth) and does not handle preflight requests (OPTIONS method).
5. Blocking of specific HTTP methods (PUT, DELETE, PATCH) by CORS policy.
6. Using fetch() or XMLHttpRequest without proper headers.

---

4. How to Fix CORS Errors in SharePoint

A. Fix External API to Allow SharePoint Origin

If you are calling an external API, the API must include CORS headers.

1. Add the following CORS headers in the API response: Access-Control-Allow-Origin: https://yourcompany.sharepoint.com Access-Control-Allow-Methods: GET, POST, OPTIONS Access-Control-Allow-Headers: Content-Type, Authorization
2. If using Node.js (Express), enable CORS: const cors = require('cors'); app.use(cors({ origin: 'https://yourcompany.sharepoint.com' }));
3. If using .NET API, add: services.AddCors(options => { options.AddPolicy("AllowSharePoint", builder => builder.WithOrigins("https://yourcompany.sharepoint.com") .AllowAnyMethod() .AllowAnyHeader()); });

---

B. Use a Proxy Server to Bypass CORS

If you cannot modify the external API, use a proxy to make the request.

Option 1: Use Azure API Management

1. Go to Azure Portal.
2. Create an Azure API Management instance.
3. Configure the API to allow CORS.
4. Use Azure API as a proxy for SharePoint.

Option 2: Use SharePoint’s _api/proxy (SharePoint Online)

You can use _api/proxy to make cross-domain requests:

const url = "https://yourcompany.sharepoint.com/_api/proxy";
fetch(url, {
   method: "POST",
   headers: {
       "Accept": "application/json",
       "Content-Type": "application/json"
   },
   body: JSON.stringify({ url: "https://api.example.com/data" })
})
.then(response => response.json())
.then(data => console.log(data));

---

C. Enable CORS in SharePoint (For External Apps Calling SharePoint API)

If you are calling SharePoint from an external app, ensure your app has proper authentication.

1. Register the App in Azure AD

1. Go to Azure Portal → Azure Active Directory.
2. Navigate to App Registrations → New Registration.
3. Add a Redirect URI:
   • For React/Angular apps: https://myapp.com
   • For Postman Testing: https://oauth.pstmn.io/v1/browser-callback
4. Assign API permissions:
   • Microsoft Graph > Sites.Read.All
   • Microsoft Graph > Sites.Manage.All

2. Use OAuth Token in API Calls

Once registered, use OAuth authentication:

fetch("https://yourcompany.sharepoint.com/_api/web/lists", {
    method: "GET",
    headers: {
        "Authorization": "Bearer YOUR_ACCESS_TOKEN",
        "Accept": "application/json"
    }
})
.then(response => response.json())
.then(data => console.log(data));

---

D. Use JSONP for Older SharePoint Versions

If you are using SharePoint 2010 or 2013, CORS is not supported.
Use JSONP (JSON with Padding) as a workaround:

$.ajax({
    url: "https://api.example.com/data?callback=?",
    dataType: "jsonp",
    success: function(response) {
        console.log(response);
    }
});

⚠ JSONP has security risks and should be avoided when possible.

---

5. Best Practices to Prevent CORS Errors

✅ Use SharePoint’s _api/proxy for external API calls.
✅ Configure CORS properly in external APIs.
✅ Use OAuth authentication for secure API calls.
✅ Enable CORS in Azure API Management for API-based integrations.
✅ Use JSONP only as a last resort for legacy SharePoint versions.

---