前端开发之路--常见的跨域问题解决方案二

原生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);

2345截图20181119003909.png

/ 定义回调执行函数，处理返回得到的数据。
function BackFunc(res) {
console.log("res便是返回的数据");
}
JSONP的原理便是将原本返回的json数据直接转为函数的参数形式返回，服务端返回的内容大概是这样：
//调用回调函数执行
BackFunc({"id":"123456","name":"jsonp"})

2345截图20181119003909.png

jQuery实现JSONP

在JavaScript类库jQuery中，也对jsonp的使用做了封装。jsonp方法都封装到了$.ajax对象里。设置参数type为"jsonp"，即可使用jsonp方法跨域，原理是相同的。

2345截图20181119003909.png

虽然jsonp方案在一些场景下可以解决跨域，但存在一些问题：一个是安全问题依然未得到保障，另外就是这种方式只能支持get请求，无法满足其它场景。所以又产生了新的方案，从后端入手处理跨域问题。

2345截图20181119003909.png

后端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信息时，就不再拦截跨域的数据了。
当然，这种方式虽然解决了支持多种请求，但是安全问题上未得到有效解决，随后再介绍其他解决跨域的方法。

2345截图20181119003909.png