javascript - 使用 AngularJS $http 服务和 Coinbase API 的 MIME 类型检查错误

Question

我正在使用 AngularJS 创建一个简单的应用程序，它使用 Coinbase API 显示 Coinbase 上比特币的当前现货汇率(价格) .

该应用程序在 Chrome、Safari、Firefox 和 Opera 中按预期运行，但在 Chrome Canary 和 IE 中我收到以下错误:

Refused to execute script from 'https://coinbase.com/api/v1/prices/spot_rate?callback=angular.callbacks._0' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.

我熟悉 AngularJS，我使用 $http 服务构建其他访问 vendor API 的应用程序，但我没有遇到过这个问题。

下面的代码应该通过 Coinbase API 获取即期汇率，将数据作为 $http 服务回调的一部分传递给范围，并通过每 60 秒进行一次后续调用来刷新存储在范围中的值。

angular.module('CoinbaseApp').controller('MainCtrl', function ($scope, $http, $interval) {

    $scope.getPrice = function(){
        $http.jsonp('https://coinbase.com/api/v1/prices/spot_rate?callback=JSON_CALLBACK').success(function(data){
            $scope.data = data;
        });
    };

    $scope.getPrice();

    $interval($scope.getPrice, 60000);
});

我的问题:严格的 MIME 类型检查问题是 Coinbase 如何提供 json 的问题吗？还是 AngularJS $http 服务和/或我请求数据的方式有问题？

Answer 1

当调用不使用适当的 CORS header 响应的服务并且不直接支持 JSONP 时，您可以安装 http 请求拦截器以将请求重写为 GET https://jsonp.afeld.me/ ，将原始 URL 移动到 config.params(连同回调)。然后定义 responseTransform 以简单地提取并返回嵌入的 JSON:

var app = angular.module('jsonp-proxy-request-interceptor', []);
app.service('jsonpProxyRequestInterceptor',
    function JsonpProxyRequestInterceptor($log) {
  var callbackRx = /callback\((.+)\);/gm;
  this.request = function(config) {
    if (config.url === 'https://api.domain.com/' && config.method === 'GET') {
      var apiUrl = config.url;
      config.url = 'https://jsonp.afeld.me/';
      config.params = angular.extend({}, config.params || {}, {
        url: apiUrl,
        callback: 'callback'
      });
      config.transformResponse.unshift(function(data, headers) {
        var matched = callbackRx.exec(data);
        return matched ? matched[1] : data;
      });
    }
    return config;
  };
});
app.config(['$httpProvider', function configHttp($httpProvider) {
  $httpProvider.interceptors.push('jsonpProxyRequestInterceptor');
}]);

您还可以从 https://gist.github.com/mzipay/69b8e12ad300ecaa467a 中 fork 这个例子的要点.