Accessing third party API without CORS error in SPFx using Azure Function

When we access third-party API in the SPFx web part, sometimes we will get a CORS error, we can fix this issue using a simple azure function.

CORS Error

Access to fetch at ',2.333' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Create a new Azure function and go-to CORS page and select the “Enable Access-Control-Allow-Credentials” check box, paste your SharePoint tenant URL without forwarding slash and the end (ex, in the “Allowed Origin” section and save

Go to the Function page and select “Create” select HTTP trigger template and after getting created go to “code + Test” and paste the following code. Save and get the function URL 

#r "Newtonsoft.Json"

using System.Net;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Primitives;
using Newtonsoft.Json;

public static async Task<IActionResult> Run(HttpRequest req, ILogger log)
    log.LogInformation("C# HTTP trigger function processed a request.");
    string name = req.Query["name"];
    string requestBody = await new StreamReader(req.Body).ReadToEndAsync();
    var client = new HttpClient();
    var response = await client.GetAsync(",2.333");
    var content = await response.Content.ReadAsStringAsync();
    return new OkObjectResult(content);

In the SPFx web part call the Azure function URL

import { HttpClient } from '@microsoft/sp-http';

export default class SpfxCors extends React.Component<ISpfxCorsProps, {}> {
  constructor(props: ISpfxCorsProps) {

  private async _getFeeds() {
    let response = await this.props.context.httpClient.get("", HttpClient.configurations.v1);
    console.log("REST API response received.");
    let tasks = await response.json();


If you have any questions, feel free to let me know in the comments section.
Happy coding!!!

3 thoughts on “Accessing third party API without CORS error in SPFx using Azure Function

  1. i tried code which you provided. but it is gives following error message.

    TypeError: Failed to fetch
    at FetchProvider.UE6e.FetchProvider.fetch (sp-webpart-workbench-assembly_en-us.js:49867)
    at Function.8Y7G.HttpClientHelper.fetchCore (sp-webpart-workbench-assembly_en-us.js:48803)
    at HttpClient.LJZb.HttpClient._fetch (sp-webpart-workbench-assembly_en-us.js:49488)
    at HttpClient.LJZb.HttpClient.fetch (sp-webpart-workbench-assembly_en-us.js:49456)
    at HttpClient.LJZb.HttpClient.get (sp-webpart-workbench-assembly_en-us.js:49469)
    at SpfxCors. (SpfxCors.tsx:58)
    at step (SpfxCors.module.scss.ts:17)
    at (SpfxCors.module.scss.ts:17)
    at SpfxCors.module.scss.ts:17
    at new Promise ()

    but following code is working for same URL

    let reqUrl = “,74.8916458?callback=?&units=si”;
    $.getJSON(reqUrl, (data) => {
    console.log(“data :”);
    }).catch((jqXHR, textStatus, errorThrown) => {



Leave a Reply to Navaratan Sharma Cancel reply

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

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

Facebook photo

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

Connecting to %s