18143453325 在线咨询 在线咨询
18143453325 在线咨询
所在位置: 首页 > 营销资讯 > 建站知识 > JavaScript跨域

JavaScript跨域

时间:2023-02-20 18:22:01 | 来源:建站知识

时间:2023-02-20 18:22:01 来源:建站知识

JavaScript跨域:

同源

定义:源=协议+域名+端口号,当两个url的这三个完全一致,即认为二者同源。

http://qq.comhttp://www.qq.com不同源(域名)
https://qq.com:8888https://qq.com:8889不同源(端口号)
https://qq.com:8888http://qq.com:8888不同源(协议)
同源策略:浏览器规定,如果JS运行在源A中,那么就只能获取到源A的数据,不能获取源B的,即不允许跨域访问。同源策略一句话概括就是:不同源的页面之间,不允许相互访问数据。

同源策略误区:既然你说不允许跨域访问数据,那为什么可以跨域使用js,css和图片等?例如在我们自己的index中“跨域”访问jquery的库。

图示
正解:同源策略限制的是数据访问,我们引用js,css等的时候,其实(可能)并不知道里面的内容。这就好比你借别人的门禁卡来开门一样,你并不知道门禁卡里面的相关信息,但是依旧可以开门。当然,我这里用的是可能,因为对于一些公共资源,网站可能设置相应协议使其他源可以跨域访问。

跨域

跨域指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制,防止他人恶意攻击网站。为了保护用户隐私,浏览器禁止跨域数据访问,这是浏览器的功能,是故意要这样设计的。

比如一个黑客,他利用iframe 把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名和密码登录时,如果没有同源限制,他的页面就可以通过JavaScript 读取到你的表单中输入的内容,这样用户名和密码就轻松到手了。


上面介绍了这么同源和跨域,那么,不禁有同学会提出疑惑,难道就不能突破源的限制进行跨域数据访问了吗?就好比你一些公共资源如天气资源等,其他网站就不能访问(跨域访问)了吗?

答:有两种策略可以进行跨域访问,分别是CORSJSONP

CORS——跨域资源共享

通俗解释就是在你需要开源的网站后端设置请求头

//语法
Access-Control-Allow-Origin: * //该资源可以被 任意 外域访问
Access-Control-Allow-Origin: https://foo.example //服务端仅允许来自 https://foo.example 的访问
代码图示
jquery开源图例
所以说,开源精神是互联网最伟大的精神之一。

JSONP

声明:JSONP和JSON半毛钱关系没有

问题:有了CORS,为啥还要JSOPN?

答:IE不支持CORS,所以需要用到JSONP来进行跨域。

面试回答JSONP:请问JSONP是啥?

答:由于当前浏览器不支持CORS,我们必须使用另一种方式来跨域,于是我们请求一个JS文件,这个文件会执行一个回调,回调里既有我们的数据。回调的名字可以随机生成,以callback的参数传给后台,后台会返回并执行。

JSONP优点:兼容IE,可以跨域(废话)

JSONP缺点:由于是script标签,所以读不到AJAX那么精确的状态,如获取到响应头,状态码等(因为只监听了onload和onerror),script标签只能发get请求,不能发post请求(面试官最希望听到的)。

////封装一个jsonpfunction jsonp(url) { return new Promise((resolve, reject) => { const random = Math.random() window[random] = (data) => { resolve(data) //成功调用resolve } const script = document.createElement('script') script.src = `${url}?callback=${random}` script.onload = () => { script.remove()//加载完后干掉 } script.onerror = () => { reject() //失败调用reject } document.body.appendChild(script) })}
更多详情请查阅



关键词:

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭