angular中$http怎么跨域post请求
1个回答
2016-10-26 · 知道合伙人软件行家
关注
展开全部
post请求进行跨域
angularjs内置封装了类ajax的网络服务$http,所以实现了依赖外部插件来完成完整的前后端分离方案
$scope.main = {
getData: function () {
$http({
method: 'POST',
url: 'http://localhost:8000',
headers: {
'Content-Type' : 'application/x-www-form-urlencoded'
},
data: {
myUrl: 'http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html'
}
}).then(function success(result) {
//数据请求成功
console.log(result.data);
},function error(err) {
//数据请求失败
console.log(err);
});
}
};
注意:表面上是向$http中传入了一个回调函数提供相应时调用,实际是返回了一个promise对象,angular1.2以上的版本对$http进行了优化
优化后:
$scope.main = {
getData: function () {
var myUrl = 'http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html';
var url = 'http://localhost:8000';
var promise = $http({
method: 'POST',
url: url,
headers: {
'Content-Type' : 'text/plain'
},
data: {
myUrl: myUrl
}
});
console.log(promise);
//第一中写法
promise.then(function success(data) {
console.log(data);
},function error(err) {
console.log(err);
});
//第二种写法
promise.success(function (data) {
console.log(data);
});
promise.error(function (err) {
console.log(err);
});
}
};
当promise对象返回时,可以链式调用;也可以分开来操作
node服务器配置:
只使用 GET, HEAD 或者 POST 请求方法。如果使用 POST 向服务器端传送数据,则数据类型(Content-Type)只能是 application/x-www-form-urlencoded, multipart/form-data 或 text/plain中的一种。不会使用自定义请求头(类似于 X-Modified 这种)。
但请求以如果 GET, HEAD 或者 POST 以外的方法发起请求。或者,使用 POST,但请求数据为 application/x-www-form-urlencoded, multipart/form-data 或者 text/plain 以外的数据类型。比如说,用 POST 发送数据类型为 application/xml 或者 text/xml 的 XML 数据的请求或者使用自定义请求头(比如添加诸如 X-PINGOTHER)时,浏览器就需要向服务器发送预请求,以确定服务器是否支持后续请求,如果支持,浏览器则继续发送后续Ajax请求
//http对象,通过他可以创建服务器,设置端口号...
var http = require('http');
//url对象,可以解析url中的内容
var url = require('url');
//查询参数对象,处理查询参数
var ql = require('querystring');
var server = http.createServer(function (request,response) {
//设置编码格式
request.setEncoding('UTF-8');
//允许跨域请求, * 代表接收任何请求
response.setHeader('Access-Control-Allow-Origin','*');
//接收前端发送的所有请求数据
var postData = '';
//监听,前端有数据,有就调用
request.addListener('data',function (data) {
postData += data;
});
//前端数据接收完毕
request.addListener('end',function () {
console.log('数据接收完毕');
//转化为JSON对象
var postDataObj = JSON.parse(postData);
console.log(postDataObj);
console.log([url,ql]);
//接收服务器请求别的服务器或借口返回的数据
var resultData = '';
http.get(postDataObj.myUrl,function (request) {
request.setEncoding('UTF-8');
//监听数据,有数据执行回调
request.on('data',function (result) {
resultData += result;
});
//接收完毕,相应给前端
request.on('end',function () {
response.end(resultData);
});
}).on('error',function (err) {
response.end(err);
});
});
});
server.listen(8000,function (err) {
if(!err){
console.log('服务器端口在8000');
}
})
angularjs请求:
$scope.main = {
getData: function () {
$http({
method: 'POST',
url: 'http://localhost:8000',
headers: {
'Content-Type' : 'application/x-www-form-urlencoded'
},
data: {
myUrl: 'http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html'
}
}).then(function success(result) {
//数据请求成功
console.log(result.data);
},function error(err) {
//数据请求失败
console.log(err);
});
}
};
angularjs内置封装了类ajax的网络服务$http,所以实现了依赖外部插件来完成完整的前后端分离方案
$scope.main = {
getData: function () {
$http({
method: 'POST',
url: 'http://localhost:8000',
headers: {
'Content-Type' : 'application/x-www-form-urlencoded'
},
data: {
myUrl: 'http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html'
}
}).then(function success(result) {
//数据请求成功
console.log(result.data);
},function error(err) {
//数据请求失败
console.log(err);
});
}
};
注意:表面上是向$http中传入了一个回调函数提供相应时调用,实际是返回了一个promise对象,angular1.2以上的版本对$http进行了优化
优化后:
$scope.main = {
getData: function () {
var myUrl = 'http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html';
var url = 'http://localhost:8000';
var promise = $http({
method: 'POST',
url: url,
headers: {
'Content-Type' : 'text/plain'
},
data: {
myUrl: myUrl
}
});
console.log(promise);
//第一中写法
promise.then(function success(data) {
console.log(data);
},function error(err) {
console.log(err);
});
//第二种写法
promise.success(function (data) {
console.log(data);
});
promise.error(function (err) {
console.log(err);
});
}
};
当promise对象返回时,可以链式调用;也可以分开来操作
node服务器配置:
只使用 GET, HEAD 或者 POST 请求方法。如果使用 POST 向服务器端传送数据,则数据类型(Content-Type)只能是 application/x-www-form-urlencoded, multipart/form-data 或 text/plain中的一种。不会使用自定义请求头(类似于 X-Modified 这种)。
但请求以如果 GET, HEAD 或者 POST 以外的方法发起请求。或者,使用 POST,但请求数据为 application/x-www-form-urlencoded, multipart/form-data 或者 text/plain 以外的数据类型。比如说,用 POST 发送数据类型为 application/xml 或者 text/xml 的 XML 数据的请求或者使用自定义请求头(比如添加诸如 X-PINGOTHER)时,浏览器就需要向服务器发送预请求,以确定服务器是否支持后续请求,如果支持,浏览器则继续发送后续Ajax请求
//http对象,通过他可以创建服务器,设置端口号...
var http = require('http');
//url对象,可以解析url中的内容
var url = require('url');
//查询参数对象,处理查询参数
var ql = require('querystring');
var server = http.createServer(function (request,response) {
//设置编码格式
request.setEncoding('UTF-8');
//允许跨域请求, * 代表接收任何请求
response.setHeader('Access-Control-Allow-Origin','*');
//接收前端发送的所有请求数据
var postData = '';
//监听,前端有数据,有就调用
request.addListener('data',function (data) {
postData += data;
});
//前端数据接收完毕
request.addListener('end',function () {
console.log('数据接收完毕');
//转化为JSON对象
var postDataObj = JSON.parse(postData);
console.log(postDataObj);
console.log([url,ql]);
//接收服务器请求别的服务器或借口返回的数据
var resultData = '';
http.get(postDataObj.myUrl,function (request) {
request.setEncoding('UTF-8');
//监听数据,有数据执行回调
request.on('data',function (result) {
resultData += result;
});
//接收完毕,相应给前端
request.on('end',function () {
response.end(resultData);
});
}).on('error',function (err) {
response.end(err);
});
});
});
server.listen(8000,function (err) {
if(!err){
console.log('服务器端口在8000');
}
})
angularjs请求:
$scope.main = {
getData: function () {
$http({
method: 'POST',
url: 'http://localhost:8000',
headers: {
'Content-Type' : 'application/x-www-form-urlencoded'
},
data: {
myUrl: 'http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html'
}
}).then(function success(result) {
//数据请求成功
console.log(result.data);
},function error(err) {
//数据请求失败
console.log(err);
});
}
};
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询