解析AngularJS中get请求URL出现的跨域问题

今天早上帮助同学看了一个AngularJS的问题，主要是请求中出现了跨域访问，请求被阻止。

下面是她给我的代码：

<html lang="en" ng-app="myApp">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <!--<script src="../js/jquery-1.11.0.js"></script>-->
 <script src="angular.min.js"></script>
 <script>
  angular.module("myApp",[]).controller("test",["$scope","$http",function($scope,$http){
    $http.get("http://datainfo.duapp.com/shopdata/getGoods.php?classID=1")
    .success(function(response){
     $scope.myarr = response.sites;
    })
  }])
 </script>
</head>
<body>
 <div ng-controller="test">
  <ul>
   <li ng-repeat="data in myarr">
    <img src="{{data.goodsListImg}}"/>
    <p>名称：<span>{{data.goodsName}}</span></p>
    <p>价格：<span>{{data.price|currency:"￥"}}</span></p>
   </li>
  </ul>
 </div>
</body>
</html>

出现的问题

我们可以看到他是通过$http的get方式访问URL，一直访问不了，我将具体的response打印到控制台上面，也使出现了问题。

这个是浏览器的跨域造成的，之前的学习中我也不是很清楚这个，只是知道由于不是在同一个域名下面访问的此域名下的资源就会造成跨域。其实之前看到这个是以为请求的格式有问题，返回的json数据到不了。

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

按照她给我的URL，我发现在json数据前面有一个callback,这个是php中的回调函数，结果网上一搜发现get请求对于这种回调函数是没有作用的。

解决办法

必须使用下面的这种办法来处理这种有callback的jsonp格式的数据。

<script>
 var myApp = angular.module("App", []);
 myApp.controller("test", function($scope, $http) {
  // 回调函数用法
  myUrl = "http://datainfo.duapp.com/shopdata/getGoods.php?callback=JSON_CALLBACK";
  $http.jsonp(myUrl).success(function(response) {
   console.log(response);
  });
 });
</script>

注意两点：

  • 使用$http.jsonp()请求数据；(解决了跨域的问题)
  • 在URL后面添加callback=JSON_CALLBACK字符；

这样就可以正常的访问数据。其实对于json个格式的数据我们要是想知道那里有错误，有一种办法是将其打印到浏览器的控制台中，这样我们就可以看到具体的流程和结果。

完整代码

<!DOCTYPE html>
<html ng-app="App">

<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="angular.min.js"></script>
 <script>
  var myApp = angular.module("App", []);
  myApp.controller("test", function($scope, $http) {
   // 回调函数用法
   myUrl = "http://datainfo.duapp.com/shopdata/getGoods.php?callback=JSON_CALLBACK";
   $http.jsonp(myUrl).success(function(response) {
    console.log(response);
    $scope.myarr = response;
   });
  });
 </script>
</head>

<body>
 <div ng-controller="test">
  <ul>
   <li ng-repeat="data in myarr">
    <!--scr里面的angularJS不可以这样写-->
    <img src="{{data.goodsListImg}}" />
    <p>名称：<span>{{data.goodsName}}</span></p>
    <p>价格：<span>{{data.price|currency:"￥"}}</span></p>
   </li>
  </ul>
 </div>
</body>

自动将我们的JSON_CALLBACK替换成了下面的字符，这应该是AngularJS替换的。

引用

跨域是如何解决的：

通过json来传递数据，靠jsonp来跨域，json是一种数据交换格式，而jsonp是一种靠开发人员的聪明才智创造的一种非官方跨域数据交互协议；

JSONP是如何产生的：

  • 一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准；
  • 不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>）；
  • 于是可以判断，当前阶段如果想通过纯web端（ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算）跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理；
  • 恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据；
  • 这样子解决方案就呼之欲出了，web客户端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件（一般以JSON为后缀），显而易见，服务器之所以要动态生成JSON文件，目的就在于把客户端需要的数据装入进去。
  • 客户端在对JSON文件调用成功之后，也就获得了自己所需的数据，剩下的就是按照自己需求进行处理和展现了，这种获取远程数据的方式看起来非常像AJAX，但其实并不一样。
  • 为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

AngularJS中处理jsonp数据

  • 使用$http.jsonp()函数来发送请求；
  • 指定callback和回调函数名，函数名为JSON_CALLBACK时，会回调success函数，JSON_CALLBACK必须全部大写；
  • 也可以指定其它回调函数，但必须定义在window下的全局函数；
  • URL中必须添加callback;

浏览器是存在同源策略的，在全局层面禁止了页面加载或执行与自身来源不同的域的任何脚本；JSONP是一种可以绕过浏览器的安全限制，从不同的域请求数据的方法；

这个解释足以理解跨域问题和为什么需要使用JSONP？

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

赞 (0)

相关推荐

  • Angular实现跨域(搜索框的下拉列表)

    angular.js 自带jsonp,实现跨域,下面来实现搜索框的下拉列表,使用百度和360分别尝试一下 百度:url截取之后红色部分需替换 :https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=数据&cb=JSON_CALLBACK 360:https://sug.so.360.cn/suggest?callback=JSON_CALLBACK&word=数据 注意:需要在服务器环境下运行 思路: 1 .声明 angular 2

  • AngularJS iframe跨域打开内容时报错误的解决办法

    <iframe id="myFrame" ng-src="{{url}}" width="100%" height="100%" seamless frameborder="0" ></iframe> 打开不同域的内容时报下面的错误: Blocked loading resource from url not allowed by $sceDelegate policy 解决方案:

  • Angular4开发解决跨域问题详解

    1.跨域 浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了. 上面提到的,同域的概念又是什么呢??? 简单的解释就是相同域名,端口相同,协议相同 同源策略: 请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同. 比如:我在本地上的域名是study.cn,请求另外一个域名一段数据,这个时候在浏览器上会报错,这个就是同源策略的保护,如果浏览器对javascri

  • 浅谈angular.js跨域post解决方案

    跨域,前端开发中经常遇到的问题,AngularJS实现跨域方式类似于Ajax,使用CORS机制. 下面阐述一下AngularJS中使用$http实现跨域请求数据. AngularJS XMLHttpRequest:$http用于读取远程服务器的数据 $http.post(url, data, [config]).success(function(){ ... }); $http.get(url, [config]).success(function(){ ... }); $http.get(ur

  • 详解AngularJS如何实现跨域请求

    跨域,前端开发中经常遇到的问题,AngularJS实现跨域方式类似于Ajax,使用CORS机制. 下面阐述一下AngularJS中使用$http实现跨域请求数据. AngularJS XMLHttpRequest:$http用于读取远程服务器的数据 $http.post(url, data, [config]).success(function(){ ... }); $http.get(url, [config]).success(function(){ ... }); $http.get(ur

  • AngularJS实现的JSONP跨域访问数据传输功能详解

    本文实例讲述了AngularJS实现的JSONP跨域访问数据传输功能.分享给大家供大家参考,具体如下: 大家会自然想到只有一个字母之差的JSON吧~ JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不是一回事儿 JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议.我们拿最近比较火的谍战片来打个比方,JSON是地下党们用来书写和交换情报的"暗号

  • AngularJs解决跨域问题案例详解(简单方法)

    AngularJs解决跨域问题案例详解(简单方法)

    首先我们做点准备说明,不然你明白我说的是啥意思别人不明白,就算别人明白了那总有人不明白,那你要说了,我的意思是这个说明必须要做了,答案是必须的,为了更好的方便大家理解嘛. 我们以两个主域名或者一个主域名+一个二级域名为例,均可演示跨域问题. 客户端 a.com 服务端 b.com或者s.a.com angularJs版本 V1.2.25 准备工作做得很充分嘛,就差把我们的编辑器是subline暴露出来了,这个一般人我是不告诉他滴. 有人嚷嚷了,这问题老早就有了,你现在提出来有啥意义呢?难不成你还

  • 详解基于angular-cli配置代理解决跨域请求问题

    详解基于angular-cli配置代理解决跨域请求问题

    1.跨域请求产生 随着不同终端(Pad/Mobile/PC)的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,我们往往需要针对不同的终端开发定制的版本.为了提升开发效率,前后端分离的需求越来越被重视,后端负责业务/数据接口,前端负责展现/交互逻辑,同一份数据接口,我们可以定制开发多个版本. 而前后端分离带来的一个问题就是前端web部署的服务器和后端提供服务的服务器大概率不在同一个域名下,进而会产生跨域问题. 2.通用解决方案 如果浏览器支持HTML5,那么就可以一

  • angular.js中解决跨域问题的三种方式

    前言 开始本文之前,大家应该首先了解,协议.主机名和端口号相同叫同源.同源策略允许页面从同一个站点加载和执行特定的脚本.站外其他来源的脚本同页面的交互则被严格限制. 要解决这个问题就需要跨域,本文介绍解决angular中的跨域的三种方式: 一.JSONP JSONP的原理是通过 <script> 标签发起一个GET请求来取代XHR请求.JSONP生成一个<script> 标签并插到DOM中,然后浏览器会接管并向 src 属性所指向的地址发送请求.当服务器返回请求时, 响应结果会被包

  • 解析AngularJS中get请求URL出现的跨域问题

    解析AngularJS中get请求URL出现的跨域问题

    今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<script src="../js/jquery-1.11.0.js"

  • 在AngularJs中设置请求头信息(headers)的方法及不同方法的比较

    在AngularJs中有三种方式可以设置请求头信息: 1.在http服务的在服务端发送请求时,也就是调用 http服务的在服务端发送请求时,也就是调用 http()方法时,在config对象中设置请求头信息:事例如下: $http.post('/somePath' , someData , { headers : {'Authorization' : authToken} }).success(function(data, status, headers, config) { //... }).

  • vue中axios实现数据交互与跨域问题

    1. 通过axios实现数据请求 vue.js默认没有提供ajax功能的. 所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. 注意,axios本质上就是javascript的ajax封装,所以会被同源策略限制. 下载地址: https://unpkg.com/axios@0.18.0/dist/axios.js https://unpkg.com/axios@0.18.0/dist/axios.min.js axios提供发送请求的常用方法有两个:axio

  • AJAX请求数据及实现跨域的三种方法详解

    AJAX请求数据及实现跨域的三种方法详解

    目录 传统方法的缺点: 什么是ajax? XMLHttpRequest 对象 五步使用法: 同步和异步的区别: 如何将原生ajax进行封装 JS几种跨域方法和原理 附:ajax跨域post请求的java代理实现 总结 传统方法的缺点: 传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互.只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户

  • springboot中如何通过cors协议解决跨域问题

    1.对于前后端分离的项目来说,如果前端项目与后端项目部署在两个不同的域下,那么势必会引起跨域问题的出现. 针对跨域问题,我们可能第一个想到的解决方案就是jsonp,并且以前处理跨域问题我基本也是这么处理. 但是jsonp方式也同样有不足,不管是对于前端还是后端来说,写法与我们平常的ajax写法不同,同样后端也需要作出相应的更改.并且,jsonp方式只能通过get请求方式来传递参数,当然也还有其它的不足之处,针对于此,我并没有急着使用jsonp的方式来解决跨域问题,去网上找寻其它方式,也就是本文主

  • 全面解析iOS中同步请求、异步请求、GET请求、POST请求

    先给大家分别介绍下iOS中同步请求.异步请求.GET请求.POST所代表的意思,然后在逐一通过实例给大家介绍. 1.同步请求可以从因特网请求数据,一旦发送同步请求,程序将停止用户交互,直至服务器返回数据完成,才可以进行下一步操作, 2.异步请求不会阻塞主线程,而会建立一个新的线程来操作,用户发出异步请求后,依然可以对UI进行操作,程序可以继续运行 3.GET请求,将参数直接写在访问路径上.操作简单,不过容易被外界看到,安全性不高,地址最多255字节: 4.POST请求,将参数放到body里面.P

  • Ajax异步(请求)提交类 支持跨域

    复制代码 代码如下: /**//* 异步请求类 作者:吾非无心 创建时间:2009.2 --------------------------------------------------------------------------------------------------------------------------------- 修改记录: 2009.4.27--添加 URL 检测功能,如果是"http://xxxx.xxx.xx.xx/.."这样的格式,使用系统提供的

  • Qt中QtWebEngine加载本地网页跨域问题的总结

    目录 1. 概述 2. 详论 2.1. 传参 2.2. JS module 3. 建议 4. 参考 1. 概述 浏览器直接加载本地网页的时候,如果网页涉及到加载本地资源(如图片),会出现跨域的问题.Qt的Qt WebEngine模块基于Chromium项目,遇到这样的情况也会出现跨域的问题. 2. 详论 2.1. 传参 理论上,我们可以像设置chrome浏览器跨域一样(设置chrome浏览器跨域网上的资料非常多),给我们使用的Qt程序传参: char ARG_DISABLE_WEB_SECURI

  • vue中proxy代理的用法(解决跨域问题)

    目录 声明 1. 首先我们应该知道 2. 跨域,什么是跨域呢? 问题 跨域的解决方案 代理服务器是如何解决跨域的? proxy配置 以vue cli3.0为例 总结 声明 1. 首先我们应该知道 前端axios在本地发送的请求如果你不把路径写全,它都是会默认加上自己项目所在的端口,就比如说: axios.get('/login') axios.get('/hello') 当我点击发送按钮之后,以上两行代码实际为: http://localhost:8080/login http://localh

  • Vue中iframe 结合 window.postMessage 实现跨域通信

    目录 一.前言 二.应用场景 2.1 嵌入页面 2.2 postMessage 实现父子页面通信 2.3 子页面向父页面传值 2.4父页面代码: 一.前言 什么是iframe? iframe 元素会创建包含另外一个文档的内联框架(即行内框架). 什么是postMessage? window.postMessage() 方法可以安全地实现跨源通信.通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同协议(通常为https),端口号(443为https的默认值),以及主机 (两个页面的模数

随机推荐