Which language are you using? In my opinion, you can't use jquery to send an ajax request to obtain an access token, that should be a CORS error.
In the meanwhile, client credential flow should be used in daemon applications, but the code you provides are likely to be a single-page application. Here's a document contains many samples for different kind of applications and you may choose one to generate your access token.

Here's my another answer on obtaining access token for calling key vault, you may refer to it. If I misunderstood in some place, pls point it out. You can also provide more details on your further issue.
=========================================================
frontend code, obtain access token from backend and calling graph api:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div>
<div id="subject"></div>
<div>create time: <span id="cDateTime"></span></div>
</div>
<script src="../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function() {
initPage();
});
function initPage(){
$.ajax({
url: "https://localhost:44343/",
type: 'get',
contentType: "application/json;charset=utf-8",
success: function(data) {
callApi(data);
},
error: function(data) {
console.info(data);
}
})
}
function callApi(accesstoken){
$.ajax({
url: "https://graph.microsoft.com/v1.0/users/{user_id_here}/calendar/events",
type: 'get',
headers: {
Authorization: "Bearer " + accesstoken
},
dataType: 'json',
success: function(data) {
var createdDateTime = data.value[0].createdDateTime;
var subject = data.value[0].subject;
$("#subject").html(subject);
$("#cDateTime").html(createdDateTime);
},
error: function(data) {
console.info(data);
}
})
}
</script>
</body>
</html>
backend code(home controller), using client credential flow to generate access token, and send it to front end. Don't forget to deal with cores error if you choose to use frontend-backend-separate.
using Azure.Identity;
using Azure.Security.KeyVault.Secrets;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using Microsoft.Identity.Client;
using System;
using System.Threading.Tasks;
namespace crendentailflow_web_mvc.Controllers
{
public class HomeController : Controller
{
private readonly ILogger<HomeController> _logger;
public HomeController(ILogger<HomeController> logger)
{
_logger = logger;
}
public async Task<string> Index()
{
//I saved the client secret in azure key vault, and you can aslo use it directly
const string secretName = "clientsecret";
var kvUri = "https://vaultname.vault.azure.net/";
var a = new DefaultAzureCredential();
var client = new SecretClient(new Uri(kvUri), a);
var secret = await client.GetSecretAsync(secretName);
string secretVaule = secret.Value.Value;
IConfidentialClientApplication app;
app = ConfidentialClientApplicationBuilder.Create("azure_ad_app_client_id")
.WithClientSecret(secretVaule)
.WithAuthority(new Uri("https://login.microsoftonline.com/your_tenant_name.onmicrosoft.com"))
.Build();
AuthenticationResult result = null;
// don't forget to add api permission in azure portal
string[] scopes = new string[] { "https://graph.microsoft.com/.default" };
result = await app.AcquireTokenForClient(scopes)
.ExecuteAsync();
string accesstoken = result.AccessToken;
return accesstoken;
}
}
}
dependencies:
<PackageReference Include="Azure.Identity" Version="1.4.0" />
<PackageReference Include="Azure.Security.KeyVault.Secrets" Version="4.1.0" />
application permissions? - Carl Zhaoclient_credentialsuses Application permissions exclusively. Delegated permissions can only be used with an authenticated user. - Marc LaFleur