js-跨域问题

前言

之前遇到过跨域的问题。也总结过相关的知识点。基本上我解决跨域的时候,要么通过CORS来解决(也就是后端写http头),要么通过前端服务器自动代理请求数据转发一下。

为什么叫跨域

在web安全中,之前“道哥”写过,前端安全是基于“同源策略”的。
具体的介绍,阮一峰大大的博客有介绍浏览器同源政策及其规避方法。我就不重复ctrl+ c + v 了。

京东jsonp

https://d.jd.com/lab/get?callback=lab

原生封装jsonp格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var h3 = document.querySelector("h3");
var button = document.querySelector("button");
function JSONP (url,callBack) {
//给window对象添加一个一个属性fetch_nameV8数值是一个函数
window.fetch_nameV8 =callBack;
var oscript = document.createElement("script");
oscript.src = url;
document.body.appendChild(oscript);
document.body.removeChild(oscript);
}
//点击事件的时候,我封装了一个函数JSONP()
button.onclick = function (argument) {
JSONP("http://127.0.0.2/anli/result/fetch_name.txt",function (data) {
console.log(data);
});
}

jsonp评价

jsonp依赖于后端,后端需要把要执行的函数和名字都写好。前端通过相同
的函数名进行声明。请求的时候,直接调用。用来获取数据。像京东那样,可以根据自己传过去的函数名,自动返回一个相同的函数是一种比较好的解决办法。
不过还是没有CORS写起来方便。