Cors Error when generating access token for SharePoint point online from a JavaScript application

Question

Any help is much appreciated. I'm trying to save data from a html form to a list in SharePoint online. I'm using SharePoint REST API to add items to the list. Ajax call to generate access token is throwing cors error.

$.ajax({
url: "https://accounts.accesscontrol.windows.net/tenant_id/tokens/OAuth/2",
type: "POST",
data: JSON.stringify({
"grant_type": "client_credentials",
"client_id": "<client_id>",
"client_secret": "<client_secret>",
"resource": "00000003-0000-0ff1-ce00-000000000000/site_url@tenant_id"
}),
headers: {
"contentType": "application/x-www-form-urlencoded",
},
success: function() {},
error: function() {}
})

Note: This code returns an access token in postman. If I use that access token in SharePoint REST Api, I'm able to add data to list. So the challenge is generating access token from my javascript application instead of Postman. I can't use MSAL as I don't want to register my app in Azure AD. I don't want a temporary fix like using a chrome extension to fix cors error or modifying rewrite rules in IIS.

I'm new to SharePoint, so any insights on alternate approaches would also be helpful.

Answer 1

I'm not sure to understand why you need to connect to "https://accounts.accesscontrol.windows.net/tenant_id/tokens/OAuth/2"? Is your HTML page inside the SharePoint site where the list is stored?

Because you can get the request digest from "/_api/contextinfo" with something like:

$.ajax({
  url: "<site_url>/_api/contextinfo", 
  header: {
    "accept": "application/json; odata=verbose", 
    "content-type":"application/json;odata=verbose"
  }, 
  type: "POST", 
  contentType: "application/json;charset=utf-8"
})

It will return a JSON string with d.GetContextWebInformation.FormDigestValue that you can then use in the header X-RequestDigest.

Once you have the Request Digest, you can use Sharepoint REST API to add stuff into the list.