javascript - 如何在angularjs中调试$http方法

Question

我正在运行一个 angularjs 应用程序，但我无法找出我的 $http 调用失败的原因。

我在浏览器中输入 url，我总是能得到响应。但是当我通过 $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

Answer 1

您正在尝试发出 CORS 请求。向您的应用程序添加 CORS 支持需要源服务器和客户端之间的协调。您可以按照此 post 中的描述创建 CORS 请求.我测试了它。

正如我所说，您还需要更改服务器响应。因此，您需要来自 translink 的支持，并且 translink 的服务器 API 响应必须包含 Access-Control-Allow-Origin header 。如果响应中不存在此 header ，则 CORS 请求将失败。

我经历了this TransLink 开发人员的主题，他们已经明确提到，

"For security reasons, changing the Access-Control-Allow-Origin header will expose the API key. For this reason we will not be making any changes at this point."

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