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',students.showAll);/*这和不跨域的写法相同*/

 

 

/*在异域服务器的showAll函数里，*/

 

var db = require("./database");

 

exports.showAll = function(req,res){

 

/**设置响应头允许ajax跨域访问**/

res.setHeader("Access-Control-Allow-Origin","*");

/*星号表示所有的异域请求都可以接受，*/

res.setHeader("Access-Control-Allow-Methods","GET,POST");

 

var con = db.getCon();

con.query("select * from t_students",function(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=?", { id: 0, action: 'jobcategoryjson' }, function(json) { alert(json[0].pid); alert(json[0].items[0]._name); });