一、同源策略

        同源策略（Same origin policy）是一种约定，它是浏览器最核心也最主要的安全功能，假设缺少了同源策略，则浏览器的正常功能可能都会受到影响。能够说Web是构建在同源策略基础之的。浏览器仅仅是针对同源策略的一种实现。

        同源策略，它是由Netscape提出的一个著名的安全策略。

如今全部支持JavaScript 的

浏览器

都会使用这个策略。

所谓同源是指，域名，协议。port同样。

当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面

当浏览器的百度tab页运行一个脚本的时候会检查这个脚本是属于哪个页面的，

即检查是否同源，仅仅有和百度同源的脚本才会被运行。

        为了好理解，举个样例：

        在localhost:8082和localhost:24253有TEST.js,当中TEST.js内容是alert("Hello World");

 

       localhost:8082的測试代码为：

    

点击buttontest后，弹出两个Hello World,当中在请求另外一个域资源的时候。由于同源策略而不能读取。

      

      

 

       可是在页面中增加<script src="http://localhost:24253/TEST.js></script>就能够绕过同源策略。由于这样是本地server訪问远程server的信息。

 

     2、理解JSONP跨域

     JSONP正是为了解决同源策略的问题。它的基本原理就是借助script标签src属性的跨域能力，通过src返回的“回调函数名+json数据”。 然后在前台的回调函数中运行该方法。

 

      我们先来看一个JSONP演示样例：

      在localhost:8082上构建一个json格式数据。然后在localhost:24253上測试：

      locahost:8082的链接和结果例如以下：

 

    在localhost:24253上调用代码例如以下：

    

 

运行后，出现例如以下错误，由于传回的json数据会当js运行。

 

 

3、JSONP演示样例（原生构造与JQuery）

如今我们在localhost:8082另构造一个“回调函数+json类型”的方法

而在localhost:24253通过这样的方式就可以调用成功，代码例如以下：

 

结果例如以下：

 

 

而借助于JQuery则可轻松实现：

function getData() {                $.ajax({            url: 'http://localhost:8082/eap/testJSONP_1',            dataType: "jsonp",            jsonp: "callback",            success: function (data) {                alert(JSON.stringify(data));            }        })    }

 

版权声明：本文博主原创文章，博客，未经同意不得转载。