跨域问题原因及解决方法

1.跨域问题是什么?

浏览器的同源策略是浏览器上为安全考虑的重要的安全策略。
从一个域上加载的脚本不允许访问另外一个域的文档属性。
如果没有同源限制,恶意网站的页面就能嵌入其它网站的页面,并窃取到关键信息。比如嵌入某网站登录页面,在用户登录的时候拿到账号密码。
跨域请求在一些浏览器上还是会被发起,但是会被浏览器拦截。Chrome下跨域请求不被发起。

2.同源是什么?

同源:URL由协议、域名、端口、路径组成,如果协议、域名、端口相同,就是同源。

3.哪些标签没有同源限制?

<script> <img> <iframe> <link>都可以加载跨域资源,不受同源限制。
这些标签不受同源限制的原理是什么?script加载资源的原理是什么?(待补充)
script并无跨域限制, 这是因为script标签引入的文件不能够被客户端的 js 获取到, 不会影响到原页面的安全, 因此script标签引入的文件没必要遵循浏览器的同源策略。

4.解决方法

a.使用<script> <img> <iframe> <link>等标签加载资源

b.通过jsonp跨域
1.用法
JSONP形式的访问是基于script标签。可以通过第三方服务器生成的动态js代码来回调本地js方法,方法中的参数由第三方服务器在后台获取,并以JSON形式填充到js方法中。
使用js可以生成如下html:
<script type="text/javascript" src="https://www.targetDomain.com/jsonp?callback=callbackName"></script>
2.原理
服务器端会返回js代码,这段代码会自动执行,并负责调用回调函数callbackName。
3.特点
兼容性好,在请求结束后通过callback方式回传结果。
使用get方式进行资源请求。
它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

c.通过修改document.domain来跨子域
d.使用window.name来进行跨域
e.使用HTML5中新引进的window.postMessage方法来跨域传送数据
f.使用代理服务器,使用代理方式跨域更加直接,因为同源限制是浏览器实现的。如果请求不是从浏览器发起的,就不存在跨域问题了。
g.CORS全称是"跨域资源共享"(Cross-origin resource sharing),CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能
(每种方法如何实现,待补充)

http://louiszhai.github.io/2016/01/11/cross-domain/#flash-URLLoder

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容