简单的JS跨域

要解释跨域,就首先要解释“跨”和“域”:

 首先是跨,之所以要跨是因为一个叫“同源策略”的东西。“同源策略”同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。同源政策规定,AJAX请求只能发给同源的网址,否则就报错。而在网页的交互处理中,不同源的网址相互访问是不可避免的,所以跨源访问就应需而出,而需要跨的源。即就是“域”。

对于一个源的定义可以找度娘看具体概念,也可以粗暴的字面理解:

     如果两个页面的协议,端口和域名都相同,则两个页面具有相同的源,这就是同源。
http://www.example.com/dir/page.html这个网址,协议是http://,域名是www.example.com,端口是80(默认端口可以省略)。它的同源情况如下。

http://www.example.com/dir2/other.html:同源

http://example.com/dir/other.html:不同源(域名不同)

http://v2.www.example.com/dir/other.html:不同源(域名不同)

http://www.example.com:81/dir/other.html:不同源(端口不同)


初阶段不涉及较深的跨域原理及方法,只要熟练掌握JSONP基础和CORS原理并能应用就可以了;


JSONP实现跨域访问数据

JSONP(JSON with Padding)是JSON的一种“使用模式”
由于同源策略,一般来说位于server1.example.com 的网页无法与不是server1.example.com的服务器沟通,而HTML 的<script>元素是一个例外。
ajax请求受同源策略影响,不允许进行跨域请求
而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域。
JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,老式浏览器全部支持,服务器改造非常小。

JSONP的基本思想是,动态创建一个<script>元素,script元素发送请求不熟同源政策的限制,只能发送get请求。服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。



通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。


CORS跨域

度娘上对于cors跨域的原理解释有一大堆,我在某乎上看见了一句自认为很好理解的话“浏览器的同源策略本质上是指:一个域名的JS,在未经允许的情况下,不得读取另一个域名的内容,但浏览器并不阻止你向另一个域名发送请求,而CORS可以告诉浏览器,我两一家的,别阻止他。”

作为前端小白,在阅读了很多技术博客以及问了大佬什么是cors之后得到一个结论,利用cors跨域,相关的操作代码是针对后台语言来说的,虽然作为前段人员后台语言也应该略懂,但现阶段首先要掌握的就是对cors原理的理解和一些简单的小操作。

*************************************

emmm,因为不论是JSONP或者CORS ,现阶段我能接触到的都是很表面的东西,道理大概懂,但一看到别的跨域分析还是会懵,这是一篇不会保存太久的文章,等我跨域真的能“跨过去”,我会回来删了重写,因为这篇文章太小白,em.








阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭