如何在angularjs中调试$ http方法

我正在运行一个angularjs应用程序，我无法找到为什么我的$http调用失败。

我在浏览器中输入网址我总是收到回复。但是，当我通过$http通过url请求失败。

我的代码是：

.controller('StopDetailCtrl', function($scope, $http) { 
    $scope.info = fetch(); 

    function fetch(){ 
     //This url works 
     // var uriBuilder = 'http://cors-test.appspot.com/test' 
     //This url doesn't 
     var uriBuilder = 'http://api.translink.ca/rttiapi/v1/stops/55612?apikey=u8RWYB3HmxjsHenpDk0u' 

    $http({ 
      method: 'GET', 
      url: uriBuilder 
     }).then(function successCallback(response) { 
      console.log('Success', JSON.stringify(response)); 
     }, function errorCallback(response) { 
      console.log('Error', JSON.stringify(response)); 
     }); 
    } 
})

我不断收到后面的错误是一个JSON字符串这是不翔实。

{ 
    "data": null, 
    "status": 0, 
    "config": { 
    "method": "GET", 
    "transformRequest": [ 
     null 
    ], 
    "transformResponse": [ 
     null 
    ], 
    "url": "http:\/\/api.translink.ca\/rttiapi\/v1\/stops\/55612?apikey=u8RWYB3HmxjsHenpDk0u", 
    "headers": { 
     "Accept": "application\/json, text\/plain, *\/*" 
    } 
    }, 
    "statusText": "" 
}

有没有我在$ http请求中丢失的东西？

我使用的API是：https://developer.translink.ca/ServicesRtti/ApiReference

来源

2016-02-27 Whitecat

检查浏览器开发工具网络中的实际请求本身的线索 – charlietfl

上传浏览器开发工具的图像..他们不告诉我任何事情。只是说'尝试加载资源时发生了错误' – Whitecat

arg ...现在我得到了开发错误XMLHttpRequest无法加载http://api.translink.ca/rttiapi/v1/stops/55612?apikey=u8RWYB3HmxjsHenpDk0u。来源http：// localhost：8100不被Access-Control-Allow-Origin所允许。＃ – Whitecat

您正试图使CORS请求。将CORS支持添加到您的应用程序需要源服务器和客户端之间的协调。您可以按照post中所述创建CORS请求。我测试了它。

正如我所说的，你也需要改变服务器的respose。所以您需要支持来自translink和translink的服务器API响应必须包含Access-Control-Allow-Origin头。如果这个头部没有响应，CORS请求将失败。

我通过他们已经明确提到，this TransLink的开发者的话题了，

“出于安全原因，改变了访问控制允许来源头将公开API密钥。出于这个原因，我们在这一点上不会做出任何更改。“

因此，除非他们添加API支持，否则CORS对TransLink的请求可能不可行。

来源

2016-03-01 17:56:55

如何在angularjs中调试$ http方法

回答

相关问题