网站跨域的五种解决方式

1、什么是跨越?

  • 一个网页向另一个不同域名/不同协议/不同端口的网页请求资源,这就是跨域。
  • 跨域原因产生:在当前域名请求网站中,默认不允许通过ajax请求发送其他域名。

2、为什么会产生跨域请求?

  • 因为浏览器使用了同源策略

3、什么是同源策略?

  • 同源策略是Netscape提出的一个著名的安全策略,现在所有支持JavaScript的浏览器都会使用这个策略。同源策略是浏览器最核心也最基本的安全功能,如果缺少同源策略,浏览器的正常功能可能受到影响。可以说web是构建在同源策略的基础之上的,浏览器只是针对同源策略的一种实现。

4、为什么浏览器要使用同源策略?

  • 是为了保证用户的信息安全,防止恶意网站窃取数据,如果网页之间不满足同源要求,将不能:
  • 1、共享Cookie、LocalStorage、IndexDB
  • 2、获取DOM
  • 3、AJAX请求不能发送

同源策略的非绝对性:

<script>

<iframe>
<link>
<video>
<audio>

等带有src属性的标签可以从不同的域加载和执行资源。其他插件的同源策略:flash、java applet、silverlight、googlegears等浏览器加载的第三方插件也有各自的同源策略,只是这些同源策略不属于浏览器原生的同源策略,如果有漏洞则可能被黑客利用,从而留下XSS攻击的后患

所谓的同源指:域名、网络协议、端口号相同,三条有一条不同就会产生跨域。 例如:你用浏览器打开http://baidu.com,浏览器执行JavaScript脚本时发现脚本向http://cloud.baidu.com域名发请求,这时浏览器就会报错,这就是跨域报错。

解决方案有五:

1、前端使用jsonp (不推荐使用)

  • 当我们正常地请求一个JSON数据的时候,服务端返回的是一串 JSON类型的数据,而我们使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的 JavaScript代码。因为jsonp 跨域的原理就是用的动态加载>
$.ajax({
url: 'http://192.168.1.114/yii/demos/test.php', //不同的域
type: 'GET', // jsonp模式只有GET 是合法的
data: {
'action': 'aaron'
},
dataType: 'jsonp', // 数据类型
jsonp: 'backfunc', // 指定回调函数名,与服务器端接收的一致,并回传回来
})
  • 使用JSONP 模式来请求数据的整个流程:客户端发送一个请求,规定一个可执行的函数名(这里就是 jQuery做了封装的处理,自动帮你生成回调函数并把数据取出来供success属性方法来调用,而不是传递的一个回调句柄),服务器端接受了这个 backfunc函数名,然后把数据通过实参的形式发送出去
  • (在jquery 源码中, jsonp的实现方式是动态添加


分享到:


相關文章: