Question

以下网址以JSON格式列出任何比赛的排名 https://www.codechef.com/api/rankings/OCT17 只需用任何比赛代码替换OCT17

我想创建一个Web应用程序，它将获取此api并显示自定义排行榜。我尝试使用angularjs但它是CORS错误

这是代码

`var app = angular.module('Ranklist', []);
app.config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
        console.log("cross origin allowed");
    }
]);
app.controller('rank',function($scope,$http){
    var uri = 'https://www.codechef.com/api/rankings/COPH2017?sortBy=rank&order=asc&page=1&itemsPerPage=25';
    $scope.test = "test data";
    console.log("love can hear")
    $http.get(uri)
        .then(function(response){
        $scope.data = response.data; 
    });
});`

控制台在Chrome中显示这两个错误

`Failed to load https://www.codechef.com/api/rankings/COPH2017?sortBy=rank&order=asc&page=1&itemsPerPage=25: The 'Access-Control-Allow-Origin' header has a value 'https://developers.codechef.com' that is not equal to the supplied origin. Origin 'http://127.0.0.1:58502' is therefore not allowed access.`

和

`angular.js:14525 Possibly unhandled rejection: {"data":null,"status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"https://www.codechef.com/api/rankings/COPH2017?sortBy=rank&order=asc&page=1&itemsPerPage=25","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":""}`

Chrome上有IE时没有错误这可以修复，还是只是服务器端问题（或他们的偏好）

我也试过$ http.jsonp（）函数。

Answer 1

您无法在客户端浏览器上发出跨域请求（CORS）。

此API仅允许来自https://developers.codechef.com

的请求

鉴于您的请求不是来自该域，您将被拒绝访问。

CORS仅由浏览器强制执行。因此，如果您有自己的后端服务器并向该服务器发出请求，并且您的服务器请求服务器（称为代理请求），那么您将没问题，因为您将避免CORS问题。

Codechef的api上的CORS（使用angularjs）

1 个答案: