文章目录
一:什么是跨域
跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。但是一般情况下不能这么做,它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。 跨域的严格一点的定义是:只要 协议,域名,端口有任何一个的不同,就被当作是跨域
这里说明一下,无法跨域是浏览器对于用户安全的考虑,如果自己写个没有同源策略的浏览器,完全不用考虑跨域问题了。
同源策略限制了一下行为: Cookie、LocalStorage 和 IndexDB 无法读取 DOM 和 JS 对象无法获取
Ajax请求发送不出去
1.从浏览器入手
其实跨域只在浏览器下才会触发,那有没有办法禁用浏览器的同源策略呢?
对于IE浏览器:进入ie的网际网路选项设置,然后选择安全性,再选择自订等级,然后下拉,找到「存取跨网络的资料来源」,选择启用即可;
对于chrome浏览器:通过在命令行,输入_chrome.exe --allow-file-access-from-files
–user-data-dir=“C:/Chrome dev session” --disable-web-security,_这会新建一个浏览器实例,自动打开的chrome会显示一系列黄色的文字就说明成功了;
对于FireFox浏览器:在地址栏输入about:config,然后下拉找到_security.fileuri.strict_origin_policy_,然后设置为false即可
2.从域名入手
既然域名等信息不一致导致跨域产生,那么干脆就把两个项目合并成一个项目,使用相同的协议、域名和端口。
3.从jsonp入手
其实认真想想,我们的系统中经常会用到外链的图片、样式文件以及插件,那这些不会导致跨域吗?是的,真的不会,因为这些是http请求,并不是前面定义的xhr(XmlHttpRequest)请求。
既然图片和js脚本可以正常请求,那么如果把script脚本的src改成我需要跨域请求的url是不是就可以了呢?
是可以的,当请求接口返回的数据需要稍微处理下。在平常引入script脚本时,下载完文件后自动执行,如果我们把src改成跨域url,而且返回值是一段jjs语句,比如:
req.send("alert(1)"); //后台返回js语句
那么前台会会自动解析并执行(这里是弹出1)。那么,如果返回的js语句是一个调用函数的js语句,恰巧前台事先定义了该函数,如:
//前台
function fun(msg){
alert(msg); }
//后台
req.send("fun('你渴望力量吗')");
那么在fun函数将被调用(可以理解成后台调用前台代码),如果对fun的参数进行处理,就可以实现复杂的业务逻辑了。
在实际情况下是怎么处理的呢?一般我们会先协商好需要被调用的方法及参数(fun),然后动态创建一个script标签,并设置该标签的src为跨域url,最后插入到文档中,插入后,浏览器会自动发起http的get请求,下载完成后将会执行后台返回的js语句(后台调用前台)。
(1)具体实现思路
本站的脚本创建一个 元素,src 地址指向跨域请求数据的服务器
提供一个回调函数来接受数据,函数名可以通过地址参数传递进行约定
服务器收到请求后,返回一个包装了 JSON 数据的响应字符串,类似这样:callback({…})
浏览器接受响应后就会去执行回调函数 callback,传递解析后的 JSON 对象作为参数,这样我们就可以在 callback 里处理数据了。实际开发中,会遇到回调函数名相同的情况,可以简单封装一个 JSONP 函数:
(2)封装一个 JSONP 函数
function jsonp({
url, params, callback }) {
return new Promise((resolve