跨域$http请求AngularJS

Posted 2023-02-27

【中文标题】跨域$http请求AngularJS

【英文标题】：Cross-domain $http request AngularJS

【发布时间】：2014-04-28 01:51:51

【问题描述】：

我有一个使用 AngularJS 构建的简单网站，它调用 json 数据的 API。

但是我遇到了跨域起源问题，这是否允许跨域请求？

错误：

XMLHttpRequest 无法加载 http://api.nestoria.co.uk/api?country=uk&pretty=1&action=search_listings&place_name=soho&encoding=json&listing_type=rent。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost' 是不允许访问的。

  searchByPlaceName: function()  
        var url = baseurl+'country=uk&pretty=1&action=search_listings&place_name=london'+encoding+type;
         return $http.get(url);
    

【问题讨论】：

允许 CORS 由 api.nestoria.co.uk 决定

【参考方案1】：

api.nestoria.co.uk 似乎不允许 CORS。它必须自己设置Access-Control-Allow-Origin 标头——您无法直接控制它。

但是，您可以使用 JSONP。该站点通过callback 查询参数允许它。

$http.jsonp(baseurl+'country=uk&pretty=1&action=search_listings&place_name=london'
    +encoding+type + "&callback=JSON_CALLBACK")

【讨论】：

你需要给jsonp提供一个回调函数。 $http.jsonp(url+"&callback=JSON_CALLBACK").success(function(data) console.log(data); );

@huocp，您的评论很有道理......但是，我仍然收到 Tom 提到的错误“Uncaught SyntaxError”

@Tom 也将 API 响应格式更改为 JSONP。 :)

@Explosion Pills 如果我使用 JSONP，则响应不会以 JSON 格式出现。它以js文件的形式响应

【参考方案2】：

安装提琴手。为其添加自定义规则：

static function OnBeforeResponse(oSession: Session)

    oSession.oResponse.headers.Add("Access-Control-Allow-Origin", "*");

这将允许您从本地主机发出跨域请求。如果 API 是 HTTPS，请确保在 fiddler 中启用“解密 HTTPS 流量”。

Reference

-------- 更新

您得到的响应是 JSON。将 JSONP 指定为数据类型将不起作用。当您指定 JSONP 时，返回应该是一个函数而不是 JSON 对象。

JSONP