angular2 http 跨域$http get怎么跨域请求

请求jsonp 服务器一般怎么输出 - CNode技术社区
积分: 6645
这家伙很懒,什么个性签名都没有留下。
var apiUrl='http://localhost:8999/list';
$http.jsonp(apiUrl).
success(function(data) {
console.log(data);
直接输出json的话打印为空, 是不是要输出
callback($json); 这种格式?
服务器输出
$jsn = json_encode($arr);
echo &JSON_CALLBACK($jsn)&;
控制台提示
ReferenceError: JSON_CALLBACK is not defined
JSON_CALLBACK([{“id”:“5”,“name”:&\u79ef\u\u5b50&,“url”:&…
JSON_CALLBACK 没有定义,你应该先在客户端定义这个函数
用这个试试 :var apiUrl=‘’;
我只知道 epress里面可以设置jsonp
自豪地采用
CNode 社区为国内最专业的 Node.js 开源技术社区,致力于 Node.js 的技术研究。
服务器赞助商为
,存储赞助商为
,由提供应用性能服务。
新手搭建 Node.js 服务器,推荐使用无需备案的AngularJS跨域请求_博客园
当前位置: >
>AngularJS跨域请求
AngularJS跨域请求
& 作者:1000px & 来源: 博客园-1000px &
本文主要针对网上各种跨域请求的总结,并加入自己的验证判断,实现工作中遇到的跨域问题。所涉及到的领域很小,仅仅局限于:AngularJS CORS post 并同时需要实现json数据传送给服务器。
首先,(博文是互相转载,也没有看出原作者和原网站,我摘写其中一段:)$http.post实现跨域:
在服务器端设置允许在其他域名下访问,及响应类型、响应头设置
response.setHeader(&Access-Control-Allow-Origin&,&*&);
response.setHeader(&Access-Control-Allow-Methods&,&POST&);
response.setHeader(&Access-Control-Allow-Headers&,&x-requested-with,content-type&);
AngularJS端使用$http.post(),同时设置请求头信息
$http.post(url,{languageColumn:'name_eu'},{'Content-Type':'application/x-www-form-urlencoded'}).success(function(data) {
当然,在我的项目中需要传递的是json格式的数据,所以需要在客户端的content-type中设置如下(如果服务器端没有设置:&Access-Control-Allow-Headers&,&x-requested-with,content-type&,下面的设置浏览器会报错):
'Content-Type':'application/json'
CORS分简单请求和复杂请求
并不是所有的跨域请求都会发送OPTIONS请求,按照这个区别,CORS分为简单请求和复杂请求,简单请求不发送OPTIONS。
HTTP的header通常包含下面这些内容:
Accept-Language
Content-Language
Last-Event-ID
Content-Type的值仅是下列之一:
application/x-www-form-urlencoded
multipart/form-data
text/plain
HTTP方法是HEAD GET POST之一,同时HTTP的header包含如上面所示,任何一个不满足这两种要求的请求,都是复杂请求,比如发送put,delete等http动作,或者Content-Type:application/json的内容。
只有复杂请求包含&预检&这一动作,另外Access-Control-Max-Age应该也会影响OPTIONS请求的发送。
另外,在《AngularJS权威指南》一书中有关跨域与同源策略问题,也有专门的讲述,这里是总结概要:
浏览器在全局层面禁止了页面加载或执行与自身来源不同的域的任何脚本。
同源策略允许页面从同一个站点加载和执行特定的脚本。浏览器会比较每一个资源的协议、主机名和端口号来判断资源是否与页面同源。站外其它来源的脚本同页面的交互则被严格限制。
跨域资源共享(Cross Origin Resource Sharing,CORS)是一个解决跨域问题的好方法,从而可以使用XHR从不同的源加载数据和资源。跨域是很久之前就有的需求此文来自: 马开东博客
转载请注明出处 网址:
,但是CORS这种方法却比较新,以前使用的是JSONP除此以外,还有一种叫做服务器代理的方法,我比较中意CORS,它不好的地方应该很少,比如,在古老的浏览器(IE8以及之前)中没有得到支持。但是对于移动端开发来说,这个可以不用考虑。
CORS实现方法在上面已经写到,并且就是基于AngularJS实现,所以这里就不再重复,但是,关于CORS分类中的非简单请求,《AngularJS权威指南》这本书有一些介绍,应该会对开发工作有所启发。
如果想要支持PUT或DELETE方法,又或者想给请求设置特殊的内容类型,就需要发送非简单请求。对于非简单请求,浏览器采用了不同的处理方式,发送两个请求:预请求和请求。
预请求是想服务器请求许可,有了服务器的许可才可以获取服务器的数据,也就是执行真正的请求。
浏览器发送的预请求是OPTIONS类型的,预请求中包含以下头信息:
Access-Control-Request-Method
Access-Control-Request-Headers&&&&这个header的值是可选的,可以是以逗号分隔的非简单头列表。
服务器必须接受这个请求,然后检查HTTP方法和头的合法性。如果通过了检查,服务器会在响应(response)中添加下面这些头参数:
Access-Control-Allow-Origin&&&&这个头的值必须和请求来源相同,或者是*代表允许任何来源的请求
Access-Control-Allow-Methods 设置HTTP方法的列表,列表中的项浏览器端才可以使用。
Access-Control-Allow-Headers 如果浏览器端请求设置了Access-Control-Request-Headers头,服务器端必须在响应中添加同一个头参数。
我们希望服务器在可以接受这个请求时返回200状态码,如果服务器返回来200状态码,真正的请求才会发出。
tips:CORS并不是安全机制,只是现代浏览器实现的一个标准。应用的安全策略还需要在项目全局的角度考虑与控制。
相关阅读:
来源:(微信/QQ:,微信公众号:makaidong-com) &&&&&& 欢迎分享本文,转载请保留出处!
&&&&&& 【原文阅读】:
上一篇:没有了
【相关文章】
每日最新文章
每日最热文章
本周最热文章
本月最热文章
本年最热文章
Powered by
Copyright &
, All Rights Reserved拒绝访问 |
| 百度云加速
请打开cookies.
此网站 () 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(3a7d6f20d0f543a7-ua98).
重新安装浏览器,或使用别的浏览器AngularJS 教程
AngularJS XMLHttpRequest
$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。
使用格式:
// 简单的 GET 请求,可以改为 POST
&&&&method: 'GET',
&&&&url: '/someUrl'
}).then(function successCallback(response) {
&&&&&&&&// 请求成功执行代码
&&&&}, function errorCallback(response) {
&&&&&&&&// 请求失败执行代码
POST 与 GET 简写方法格式:
$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
此外还有以下简写方法:
$http.head
$http.post
$http.delete
$http.jsonp
$http.patch
更详细内容可参见:
读取 JSON 文件
以下是存储在web服务器上的 JSON 文件:
/try/angularjs/data/sites.php
&sites&: [
&Name&: &菜鸟教程&,
&Url&: &&,
&Country&: &CN&
&Name&: &Google&,
&Url&: &&,
&Country&: &USA&
&Name&: &Facebook&,
&Url&: &&,
&Country&: &USA&
&Name&: &微博&,
&Url&: &&,
&Country&: &CN&
AngularJS $http
AngularJS $http 是一个用于读取web服务器上数据的服务。
$http.get(url) 是用于读取服务器数据的函数。
废弃声明 (v1.5)
v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代。
通用方法实例
AngularJS1.5 以上版本 - 实例
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
method: 'GET',
url: '/try/angularjs/data/sites.php'
}).then(function successCallback(response) {
$scope.names = response.data.sites;
}, function errorCallback(response) {
简写方法实例
AngularJS1.5 以上版本 - 实例
&div ng-app=&myApp& ng-controller=&siteCtrl&&
&li ng-repeat=&x in names&&
{{ x.Name + ', ' + x.Country }}
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
$http.get(&/try/angularjs/data/sites.php&)
.then(function (response) {$scope.names = response.data.});
AngularJS1.5 以下版本 - 实例
&div ng-app=&myApp& ng-controller=&siteCtrl&&
&li ng-repeat=&x in names&&
{{ x.Name + ', ' + x.Country }}
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
$http.get(&/try/angularjs/data/sites.php&)
.success(function (response) {$scope.names = response.});
注意:以上代码的 get 请求是本站的服务器,你不能直接拷贝到你本地运行,会存在跨域问题,解决办法就是将 Customers_JSON.php 的数据拷贝到你自己的服务器上,附:。
AngularJS 应用通过 ng-app 定义。应用在 &div& 中执行。
ng-controller 指令设置了 controller
函数 customersController 是一个标准的 JavaScript
对象构造器。
控制器对象有一个属性: $scope.names。
$http.get() 从web服务器上读取静态
JSON 数据。
服务器数据文件为:
当从服务端载入 JSON 数据时,$scope.names 变为一个数组。
以上代码也可以用于读取数据库数据。
记住登录状态
重复输入密码Angular2中Http访问后端接口跨域问题 - Coder Yasmine - CSDN博客
Angular2中Http访问后端接口跨域问题
& & & & Http访问跨域问题是一个老生常谈的事情,之前web端用JSP的时候就会出现,不同系统之间在JS中调用服务时,就会出现跨域问题,因为要访问的服务发布在不同的服务中。当时的解决办法是使用JQuery封装的jsonp方式,它类似于JQuery的.json方法的使用方式,这里就不赘述了。
& & & & 最近在做前后端分离,前端框架采用的Angular2,同样的好巧不巧的也遇到了跨域问题,如下图所示:
& & & & 我的做法是在后端接口response的时候设置Access-Control-Allow-Origin属性的值:
在Controller相应方法中添加下面代码:
response.setHeader(&Access-Control-Allow-Origin&, &*&);
或者在方法上面添加注解:
@CrossOrigin(origins = {&http://localhost:4200&,&null&})
& & & & 当然在后端也可以统一拦截进行处理,或者在前端也可以处理,但是修为尚浅,还不太清楚在前端怎么处理。而且前端的东西,远不止现在了解的这些Angular2的东西,现在的还是皮毛,前端的水还是很深的。
我的热门文章}

我要回帖

更多关于 angular 跨域请求 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信