今天早上帮同学看到了AngularJS的一个问题，主要是因为请求中出现了跨域访问，请求被屏蔽了。

这是她给我的密码：

html lang=' en ' ng-app=' myApp ' head meta charset=' UTF-8 ' title title/title！-脚本src='http:/js/jquery-1 . 11 . 0 . js '/script-script src=' http : angular . min . js '/script script angular . module(' myApp '，[])。控制器(' test '，['$scope '，' $http '，函数($scope，$ http){ $ http . get(' http://datainfo . duapp.com/shop data/getgoods . PHP？classID=1 ')。成功(函数(响应){ $ scope . myar=response . sites；})}])/script/head body div ng-controller=' test ' ul Li ng-repeat=' data in myar ' img src=' http : { { data . goodslismig } } '/p name:Span { { data . goodsname } }/Span/p pPrice:Span { { data }。价格|货币： ' } }/span/p/Li/ul/div/body/html问题

我们可以看到他通过$http get访问了该URL，但是他不能一直访问它。我在控制台上打印了具体的回应，这也造成了问题。

这是跨域浏览器造成的。在之前的研究中，我对此不是很清楚。我只知道这个域名下的资源是跨域的，因为它们不是在同一个域名下访问的。其实我之前看到这个是因为我觉得请求的格式有问题，返回的json数据无法到达。

以下是以json格式返回的数据。

根据她给我的URL，我发现json数据前面有一个回调，是php中的一个回调函数。结果，在互联网上搜索发现get请求对这个回调函数没有影响。

解决办法

必须使用以下方法通过回调处理jsonp格式的数据。

脚本var myApp=angular.module('App '，[])；Myapp.controller ('test '，function ($ scope，$ http){//回调函数用法my URL=' http://datainfo . duapp.com/shop data/getgoods . PHP？回调=JSON _ CALLBACK '；$http.jsonp(myUrl)。成功(函数(响应){ console.log(响应)；});});/脚本注意两点：

使用$ httpjsonp()请求数据；(解决了跨域的问题)在URL后添加callback=JSON_CALLBACK字符；这样，数据就可以正常访问。事实上，如果我们想知道json格式的数据有错误，一种方法是将其打印到浏览器的控制台上，这样我们就可以看到具体的过程和结果。

完全码

！DOCTYPE html html ng-App=' App ' head meta charset=' UTF-8 ' title title/title脚本src=' http : angular . min . js '/脚本var myApp=angular.module('App '，[])；Myapp.controller ('test '，function ($ scope，$ http){//回调函数用法my URL=' http://datainfo . duapp.com/shop data/getgoods . PHP？回调=JSON _ CALLBACK '；$http.jsonp(myUrl)。成功(函数(响应){ console.log(响应)；$ scope.myarr=response});});/script/head body div ng-controller=' test ' ul Li ng-repeat=' myar中的数据'！-angularJS in - scr不能这样写-img src=' http : { { data . goodslismig } } '/p Name:span { { data . goodsname } }/span/p Price:span { { data . Price | currency : ' } ' }/span

用以下字符自动替换我们的JSON_CALLBACK，应该用AngularJS替换。

引用

如何解决跨域：

Json是一种数据交换格式，jsonp是一种非官方的跨域数据交换协议，由开发人员别出心裁地创建。

JSONP是如何产生的：

作为一个众所周知的问题，Ajax直接请求普通文件进行跨域未授权访问。不管你是静态页面、动态网页、web服务还是WCF，只要是跨域请求，都是不允许的；但是我们也发现js文件在Web页面上调用时不受跨域影响(不仅如此，我们还发现所有属性为“src”的标签都具有跨域能力，比如script、img、iframe)；因此可以判断，现阶段如果想通过纯web (ActiveX控件、服务器代理、未来属于HTML5的Websocket等)跨域访问数据。)，只有一种可能，那就是尽量把数据放到远程服务器上的js格式文件中，供客户端调用和进一步处理；恰好我们已经知道有一种纯字符的数据格式叫做jsON，可以简洁地描述复杂的数据。更好的是，JSON本身也是JS支持的，所以这种格式的数据在客户端几乎可以随意处理；这样，解决方案就会脱颖而出。web客户端调用跨域服务器上动态生成的js格式文件(通常以JSON作为后缀)，调用方式与调用脚本相同。显然，服务器动态生成JSON文件的目的是加载客户端所需的数据。成功调用JSON文件后，客户端得到自己需要的数据，剩下的根据自己的需要进行处理和呈现。这种获取远程数据的方式看起来与AJAX非常相似，但实际上是不同的。为了方便客户端使用数据，一种非正式的传输协议逐渐形成，称为JSONP。该协议的一个关键点是允许用户向服务器传递一个回调参数，然后服务器在返回数据时将JSON数据包装为一个函数名，这样客户端就可以自定义自己的函数来自动处理返回的数据。在AngularJS中处理jsonp数据

使用$ http函数发送请求；指定回调和回调函数名。当函数名为JSON_CALLBACK时，成功函数将被回调。JSON_CALLBACK必须大写。也可以指定其他回调函数，但是必须定义window下的全局函数。回调必须添加到网址；浏览器中有一个对应的策略，在全局级别禁止页面加载或在不同于自己来源的域中执行任何脚本；JSONP是一种可以绕过浏览器安全限制，从不同域请求数据的方法。

这个解释足以理解跨域问题，以及为什么需要JSONP。

以上就是本文的全部内容。希望对大家有帮助，支持我们！