Question

我正在向http://catfacts-api.appspot.com/api/facts＆＃39;提出请求。在我的角度应用程序。我使用$http服务对页面进行了http GET，但是我得到了一个跨源错误：

$http({
    method: 'GET',
    url: 'http://catfacts-api.appspot.com/api/facts'
}).then(function(response) {
    console.log(response);
});

但我得到了一个交叉来源错误

XMLHttpRequest cannot load http://catfacts-api.appspot.com/api/facts. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://cat-facts-alexwohlbruck.c9users.io' is therefore not allowed access.

我尝试使用JSONP，但是我遇到了语法错误。我很困惑为什么会这样。

$http.jsonp('http://catfacts-api.appspot.com/api/facts?number=1&callback=JSON_CALLBACK').success(function(data) {
    console.log(data);
})

Uncaught SyntaxError: Unexpected token :          facts?number=1&callback=angular.callbacks._0:1

您可以查看页面here

Answer 1

我认为您的api中存在错误，您当前的api状态

{“事实”：[“在野外，狮子的平均寿命为12年，最长可达16年。他们在人工饲养中长达25年。”]，“成功”：“真实”}

尝试将其更改为

{“事实”：“在野外，狮子的平均寿命为12年，最长可达16年。在人工饲养中，他们的寿命长达25年。”，“成功”：“真实”}

只需删除方括号，因为在json格式中这个简单的结果应该是

{“variable_name”：“value”，“variable_name”：“value”}

如果你想在另一个对象中嵌套另一个对象，你需要使用方括号，例如

 "Names" : [   
                            { "firstName" : "John",  
                              "lastName"  : "Doe",
                              "age"       : 23 },

                            { "firstName" : "Mary",  
                              "lastName"  : "Smith",
                              "age"       : 32 }
                          ],  "some_var" : "some_val"}

如您所见，我们可以在“Names”中传递另一个对象，因为您只传递一个不需要使用方括号的字符串。

另一种解决方案可以是

{“fact”：[“newFact”：“在野外，狮子的平均寿命为12年，最长可达16年。他们在被囚禁时长达25年。”]，“成功”：“真实“}

它应该有用。

Answer 2

您可以通过以下任何一种方法解决此问题

1）在API端点创建Access-Control-Allow-Origin标头。然后尝试简单的获取。因为错误是，

否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上。

Plunker：https://plnkr.co/edit/xFR0CEiZTioR2nEW4HEx

2）如果您打算从JSONP请求中获取响应，那么您的请求应该包含在这样的回调中。

JSON_CALLBACK({
  "facts": ["Cats purr at the same frequency as an idling diesel engine, about 26 cycles per second."],
  "success": "true"
 })

现在你只返回JSON对象。 Plunker：https://plnkr.co/edit/M3c849O0PoAmxYbsk9tE

文档：https://docs.angularjs.org/api/ng/service/ $ http＃jsonp

更新：同时在执行get请求时，谨慎的做法是返回标头mimetype: application/json

更新2 ：使用`ngResource也失败 Plunk：https://plnkr.co/edit/wdoD73920Mnc8RRmoUKX?p=preview

Angular JSONP＆＃34; Uncaught SyntaxError：意外的令牌：＆＃34;

2 个答案: