AmCharts JS 承载认证

Question

我有一个带有 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" });
        }
    }
}

我知道 server-part 工作正常，因为我可以通过如下所示的 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”），我尝试像应该的那样使用我的不记名授权令牌设置一个 request-header，但它拒绝工作。我尝试了以下方法：

// 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()

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

// 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()

上面只有 Authorization: Bearer 行，或者没有围绕 JSON Object 的 [] 也不起作用。

搜索 YouTube 也一无所获，所以如果有人知道我遗漏了什么，将不胜感激。

Answer 1

所以事实证明，DataSource object 采用 requestHeaders 数组作为它的 requestOptions。让它读取您的 headers 的正确方法是像这样添加它们：

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

文档中也有具体说明，但我当时看的时候并没有想到。文档来源：https://www.amcharts.com/docs/v4/reference/datasource/

AmCharts JS 承载认证

AmCharts JS Bearer Authentication

javascript

authentication

charts

amcharts

amcharts4