I am currently working with a .NET Core server that has an API from which I need to request data using the default loading method in AmCharts.
The endpoint on the server side is structured like this:
[Authorize]
public class StocksController : ApiController {
[HttpGet("{id}")]
public async Task<ActionResult<string>> GetStockIntraday1min(string id) {
return await Mediator.Send(new GetStockHistoryQuery { Symbol = id, Interval = "1min" });
}
}
}
Using a JS Fetch request, I can successfully retrieve the data, as shown in the example below.
let response = await fetch("api/stocks/getstockintraday1min/tsla", {
headers: {
Accept: "application/json",
"Content-Type": "application/json",
"Authorization": `Bearer ${token}`
}
})
However, when I attempt to achieve the same result using AmCharts, I encounter a 401 Unauthorized Request error in the FireFox console, as highlighted below:
XHR GET https://localhost:44397/api/stocks/getstockintraday1min/tsla [HTTP/2 401 Unauthorized 8ms]Following the guidance from the AmCharts documentation, specifically regarding setting up request headers with the authorization token, I have made several attempts which have been unsuccessful. Here is a snippet of what I have tried:
// Apply themes
am4core.useTheme(am4themes_animated) // Animations
am4core.useTheme(am4themes_dark) // Colors
// Create chart
let chart = am4core.create("chartdiv", am4charts.XYChart)
chart.padding(5, 15, 5, 15)
// Add data source information
console.log(authToken) // To verify token actually is set
let myHeaders = new Headers({
"Accept": "application/json",
"Content-Type": "application/json",
"Authorization": `Bearer ${authToken}`
})
chart.dataSource.url = "api/stocks/getstockintraday1min/tsla"
chart.dataSource.requestOptions.requestHeaders = myHeaders
// chart.dataSource.requestOptions.withCredentials = true // seems to do nothing?
chart.dataSource.parser = new am4core.JSONParser()
Despite my efforts, I have been unable to get the Authorization header to work properly. I have also attempted variations, as shown below:
// Apply themes
am4core.useTheme(am4themes_animated) // Animations
am4core.useTheme(am4themes_dark) // Colors
// Create chart
let chart = am4core.create("chartdiv", am4charts.XYChart)
chart.padding(5, 15, 5, 15)
// Add data source information
console.log(authToken) // To verify token actually is set
chart.dataSource.url = "api/stocks/getstockintraday1min/tsla"
chart.dataSource.requestOptions.requestHeaders = [{
"Accept": "application/json",
"Content-Type": "application/json",
"Authorization": `Bearer ${authToken}`
}]
// chart.dataSource.requestOptions.withCredentials = true // seems to do nothing?
chart.dataSource.parser = new am4core.JSONParser()
Unfortunately, none of the options with just the Authorization: Bearer row or without the [] surrounding the JSON Object have been successful.
Despite searching various resources, including YouTube, I have not been able to find a solution. Any assistance in identifying what I may be missing would be greatly appreciated.