频道导航

ajax的跨域处理方式

2020-06-16 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' 
 /*这和不跨域的写法相同*/ 

@H_301_85@

/*在异域服务器的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相关文章