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); });