ajax的跨域处理方式

前端之家收集整理的这篇文章主要介绍了ajax的跨域处理方式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

根据同源策略,ajax不能请求域值和端口号不同的url,则有以下三种处理方式。

1.H5中的XHR2已经默认支持跨域访问,只需要在服务端入口文件加上响应头header("Access-Control-Allow-Origin:*");

2.使用jsonp方式取代xhr方式,在客户端设置,在服务端设置。如下。

js代码
$.ajax({
type: "get" ,
url: "http://localhost:3000/showAll" /*url写异域的请求地址*/
dataType: "jsonp" /*加上datatype*/
jsonpCallback: "cb" /*设置一个回调函数,名字随便取,和下面的函数里的名字相同就行*/
success: function (){
。。。
}
});
/*而在异域服务器上,*/
app.js
app.get( '/showAll' /*这和不跨域的写法相同*/
/*在异域服务器的showAll函数里,*/
var db = require( "./database" );
exports.showAll = (req,res){
/**设置响应头允许ajax跨域访问**/
res.setHeader( "Access-Control-Allow-Origin" "*" );
/*星号表示所有的异域请求都可以接受,*/
"Access-Control-Allow-Methods" "GET,POST" );
con = db.getCon();
con.query( "select * from t_students" (error,rows){
if (error){
console.log( "数据库出错:" +error);
} else {
/*注意这里,返回的就是jsonP的回调函数名+数据了*/
res.send( "cb(" +JSON.stringify(r)+ ")" );
}
});
}
3.使用jquery $.getjson方法,该种方法也是基于JSONP,在服务端也要设置,与第二种方法不同的仅仅在于跨域回调函数名是不是随机生成的。

$.getJSON("http://e.hnce.com.cn/tools/ajax.aspx?jsoncallback=?"'jobcategoryjson' },function(json) { alert(json[0].pid); alert(json[0].items[0]._name); });

猜你在找的Ajax相关文章