angularjs - 为什么我在尝试访问公共 API 时会在 CORS 上被阻止？

Question

我正在尝试通过我的 AngularJS Web 应用程序访问安大略省政府的 COVID-19 案例 CKAN API。但是，这个请求：

var url = "https://data.ontario.ca/api/3/action/datastore_search?q=jones&resource_id=455fd63b-603d-4608-8216-7d8647f43350"
         return $http.get(url).then(function (data) {
             console.log(data)
             return data;
         }); 
     };

得到回应：

从源“ http://localhost:3000 ”访问“ https://data.ontario.ca/api/3/action/datastore_search?q=jones&resource_id=455fd63b-603d-4608-8216-7d8647f43350 ”的 XMLHttpRequest被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

该网站给出了通过 JavaScript 访问 API 的示例：

var data = {
          resource_id: '455fd63b-603d-4608-8216-7d8647f43350', // the resource id
          limit: 5, // get 5 results
          q: 'jones' // query for 'jones'
        };
        $.ajax({
          url: 'https://data.ontario.ca/api/3/action/datastore_search',
          data: data,
          dataType: 'jsonp',
          success: function(data) {
            alert('Total results found: ' + data.result.total)
          }
        });

如何从我的 AngularJS Web 应用程序成功地向这个 api 发出请求？

标签： angularjsapicors

Answer 1

我能够通过使用JSONP请求而不是标准 GET 来解决这个问题。

var url = "https://data.ontario.ca/api/3/action/datastore_search?q=jones&resource_id=455fd63b-603d-4608-8216-7d8647f43350"
         return $http.jsonp($sce.trustAsResourceUrl(url)).then(function (data) {
             return data;
         });