$http跨域请求怎么解决

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)

})

}

}

对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200(返回数据)

而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok(返回数据)。

也就是说，GET只需要汽车跑一趟就把货送到了，而POST得跑两趟，第一趟，先去和服务器打个招呼“嗨，我等下要送一批货来，你们打开门迎接我”，然后再回头把货送过去。

因为POST需要两步，时间上消耗的要多一点，看起来GET比POST更有效。因此Yahoo团队有推荐用GET替换POST来优化网站性能。但这是一个坑!跳入需谨慎。为什么?

1）GET与POST都有自己的语义，不能随便混用。

2）据研究，在网络环境好的情况下，发一次包的时间和发两次包的时间差别基本可以无视。而在网络环境差的情况下，两次包的TCP在验证数据包完整性上，有非常大的优点。

3）并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。

浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域

$.getJSON()方法跨域 去取得服务器的json对象的时候，url的后缀最后带一个"callback=?"的参数作为成功的回调函数；如：

JS代码：

var url = "${BIPJS}/intf/accountsOfRefuseEmail.jsp?act=add&siteId=${LANG.siteId}&accountId=${loginId}&callback=?"

$.getJSON(url, {} , function(data) {

var code = data.code

if(code == 0){

$('#floatOne').myFadeIn()

}

})

此时返回的data是一个json对象；相应地，服务器返回字符串应该要这种样式：

JAVA代码：

String callback = T.stringValue(getRequestParams(request,"callback"),"")

JSONObject jo = new JSONObject()

out.print(callback + "(" + jo + ")")

原理：

Jquery在解析请求callback=?的时候，会自动生成一个callback=jsonp***的字符串，这个字符串jsonp***在成功回调的时候作为一个方法，被Jquey自动执行，参数是一个json格式的字符串（这里是data）。相应地；服务器返回的字符串要这种形式：jsonp***(JSONObject)。

如：刚上面的url被Jquey解析成：

Request URL:

http://localhost.pcauto.com.cn:12385/intf/accountsOfRefuseEmail.jsp?act=add&siteId=2&accountId=388&callback=jsonp1381976698163&_=1381976708919

服务器返回的字符串形式：

jsonp1381976698163({"code":0,"msg":"增加用户成功"})

Jquery的回调方法jsonp1381976698163(jsonStr)就是要把字符串jsonStr转换成josn对象,这里就是转换成data这个json对象。

---