CORS issue when trying to generate access token via Microsoft Graph

Syed Burhan Ali Shah 0 Reputation points
2023-01-25T12:44:52.4733333+00:00

Hi,

I am trying to generate an access token using Microsoft Graph for which I have registered an app on portal.azure.com .I'm able to generate access token from Postman but getting "No 'Access-Control-Allow-Origin' header is present on the requested resource." and a 400 Bad Request when trying to generate it from browser using jquery.

Scenario: I'm using Power Pages and I want to list items from a SharePoint list for which I need access token from Microsoft Graph, so I can use the access token to perform CRUD operations.


    var form = new FormData();
    form.append("grant_type", "client_credentials");
    form.append("client_id", "{{ClientID}}");
    form.append("client_secret", "{{ClientSecret}}");
    form.append("scope", "https://graph.microsoft.com/.default");

    var settings = {
    "url": "https://login.microsoftonline.com/{{TenantID}}/oauth2/v2.0/token",
    "method": "POST",
    "timeout": 0,
    "headers": {
        "Content-Type": "application/x-www-form-urlencoded"
    },
    "processData": false,
    "mimeType": "multipart/form-data",
    "contentType": false,
    "data": form
    };

    $.ajax(settings).done(function (response) {
    console.log(response);
    });


CORS

I've searched a lot but unable to find a solution

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
6,048 questions
Microsoft Graph
Microsoft Graph
A Microsoft programmability model that exposes REST APIs and client libraries to access data on Microsoft 365 services.
589 questions
No comments
{count} votes

2 answers

Sort by: Most helpful
  1. SiddharthGautam-MSFT 80 Reputation points Microsoft Employee
    2023-01-25T15:59:49.9766667+00:00

    Hello Syed Burhan Ali Shah,

    Thanks for posting!

    Please refer to the similar thread.

    CORS issue while getting token with Oauth 2.0 Client credential flow.

    Hope this helps.

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


  2. RaytheonXie_MSFT 14,386 Reputation points Microsoft Employee
    2023-01-26T05:57:06.0233333+00:00

    Hi @Syed Burhan Ali Shah,

    We need to use msal in react to avoid CORS problems. The Microsoft Authentication Library for JavaScript (MSAL.js) v2.0 brings support for the authorization code flow with PKCE and CORS to single-page applications on the Microsoft identity platform. Follow the steps in the sections below to migrate your MSAL.js 1.x application using the implicit grant to MSAL.js 2.0+ (hereafter 2.x) and the auth code flow.

    Here are some code samples for MSAL

    Microsoft identity platform code samples


    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.