根据同源策略,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*/
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); });