将 C3.js 中的 HTTP 请求标头发送到源 URL

Question

我正在使用 c3-angular.min.js。在客户端，我编写了一个拦截器，用于向发送到 api 服务器的每个请求添加授权标头。 除了通过 C3.js 发出的请求之外，所有 http 请求似乎都有授权。结果，我的图表收到 401 错误。没有太多可用的文档。

如何在 c3.js 发出的请求上添加 http 请求标头。

 $scope.config={
            bindto: '#div1_chart',
            data: {
              'x':'x',
              'types':{'count':'area'},
              'names':{'count':'hits/day'},
              'url':$scope.base_url,
              'mimeType':'json'
            },
            axis : {
                x : {
                    type : 'timeseries',
                    tick : {
                rotate: 45,
                multiline: false,
                      fit: false,
                      format : $scope.format 
                    },
              height:100
                }
            }
        };
$scope.showGraph = function() {
    $scope.chart = c3.generate($scope.config);     
}

Answer 1

我刚刚浏览了 C3.js 库的代码，发现了一个未记录的功能，它正是这样做的。如果你想依赖它，这取决于你，但它似乎工作得很好。我检查了GitHub repository的最新代码。

您可以通过将headers 对象添加到data 对象或load 函数的对象来执行此操作。然后，headers 对象的每个键/值对都将被转换为 XMLHttpRequest 请求标头。这是库的相关代码：

else if (args.url) {
    $$.convertUrlToData(args.url, args.mimeType, args.headers, args.keys, function (data) {
        $$.load($$.convertDataToTargets(data), args);
    });
}

然后在convertUrlToData()：

if (headers) {
    Object.keys(headers).forEach(function (header) {
        req.header(header, headers[header]);
    });
}

因此，在 C3.js 中带有标头的请求示例如下所示：

var chart = c3.generate({
    data: {
        url: 'https://c3js.org/data/c3_test.csv',
        headers: {
            "testheader": "testvalue" 
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.2/c3.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.2/c3.css" rel="stylesheet">

<div id="chart"></div>