原生JS实现JSONP
JSONP解决方法。
就是利用script标签的src属性去加载数据。每当需要跨域请求数据的时候,生成一个script标签,设置src属性为请求数据的url,然后加入到DOM中触发执行。
//创建script标签
var script = document.createElement('script');
//设置script标签的type属性
script.type = 'text/javascript';
//设置script标签的src属性并指定回调执行函数为BackFunc
script.src = 'http://localhost:8080/login?user=admin&callback=BackFunc';
//这一步很重要,要将script元素插入到DOM中
document.head.appendChild(script);
/ 定义回调执行函数,处理返回得到的数据。
function BackFunc(res) {
console.log("res便是返回的数据");
}
JSONP的原理便是将原本返回的json数据直接转为函数的参数形式返回,服务端返回的内容大概是这样:
//调用回调函数执行
BackFunc({"id":"123456","name":"jsonp"})
jQuery实现JSONP
在JavaScript类库jQuery中,也对jsonp的使用做了封装。jsonp方法都封装到了$.ajax对象里。设置参数type为"jsonp",即可使用jsonp方法跨域,原理是相同的。
虽然jsonp方案在一些场景下可以解决跨域,但存在一些问题:一个是安全问题依然未得到保障,另外就是这种方式只能支持get请求,无法满足其它场景。所以又产生了新的方案,从后端入手处理跨域问题。
后端CORS跨域
在服务端处理前端请求返回数据的时候,设置response的header信息。
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With,content-type,token");
response.setHeader("Access-Control-Allow-Methods", "HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
这样浏览器在读取响应的header信息时,就不再拦截跨域的数据了。
当然,这种方式虽然解决了支持多种请求,但是安全问题上未得到有效解决,随后再介绍其他解决跨域的方法。