AmCharts JS承载身份验证

问题描述

我有一个带有API的.NET Core服务器，我正在尝试通过AmCharts“默认”加载方法请求数据。

服务器端端点如下：

[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" });
        }
    }
}

我知道服务器部分可以正常工作，因为我可以通过下面的JS Fetch请求来请求数据，并且工作正常。

let response = await fetch("api/stocks/getstockinTraday1min/tsla",{
    headers: {
        Accept: "application/json","Content-Type": "application/json","Authorization": `Bearer ${token}`
    }
})

但是，当我尝试通过AmCharts按照您应该做的方式做同样的事情时，我在FireFox控制台中收到一个401未经授权的请求，如下所示： XHR GET https://localhost:44397/api/stocks/getstockinTraday1min/tsla [HTTP/2 401 Unauthorized 8ms]

就像AmCharts文档建议的那样（https://www.amcharts.com/docs/v4/reference/datasource/#Properties向下滚动到“ requestOptions”），我试图像我应该的那样用我的载体授权令牌设置一个请求标头，但是它拒绝工作。我尝试了以下方法：

// 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 @R_332_4045@ion
console.log(authToken) // To verify token actually is set
let myHeaders = new Headers({
    "Accept": "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()

如果仅使用“授权”，则上面显示的内容不起作用：Bearer ${authToken} 我也尝试过：

// Apply themes
am4core.useTheme(am4themes_animated) // Animations
am4core.useTheme(am4themes_dark) // Colors

// Create chart
let chart = am4core.create("chartdiv",15)
// Add data source @R_332_4045@ion
console.log(authToken) // To verify token actually is set
chart.dataSource.url = "api/stocks/getstockinTraday1min/tsla"
chart.dataSource.requestOptions.requestHeaders = [{
    "Accept": "application/json","Authorization": `Bearer ${authToken}`
}]
// chart.dataSource.requestOptions.withCredentials = true // seems to do nothing?
chart.dataSource.parser = new am4core.JSONParser()

上面仅带有Authorization：Bearer行，或者没有[]围绕JSON Object的上述方法也不起作用。

搜索YouTube也没有任何效果，因此，如果有人对我所缺少的内容有任何线索，将不胜感激。

解决方法

因此，事实证明DataSource对象将requestHeaders数组作为requestOptions。读取标题的正确方法是像这样添加它们：

chart.dataSource.requestOptions.requestHeaders = [
    {key: "Authorization",value: `Bearer ${accessToken}`}
]

文档中也指定了此内容，但当时我在阅读时并没有点击它。文件来源：https://www.amcharts.com/docs/v4/reference/datasource/

amcharts amcharts4 authentication charts javascript