进阶13-JSONP跨域

1.什么是同源策略
浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。

同协议：如都是http或者https
同域名：如都是http://jirengu.com/a 和-http://jirengu.com/b
同端口：如都是80端口
需要注意的是: 对于当前页面来说页面存放的 JS 文件的域不重要，重要的是加载该 JS 页面所在什么域

2.
什么是跨域
跨域是指从一个域名的网页去请求另一个域名的资源。严格的定义是：只要不符合同源政策的任意一条，就被当作跨域。

为什么浏览器要限制跨域
原因就是安全问题：如果一个网页可以随意的访问另外一个网站的资源，那么就有可能在客户完全不知情的情况下出现安全问题。

跨域的实现形式
同源政策做的限制：
（1） Cookie、LocalStorage 和 IndexDB 无法读取。
（2） DOM 无法获得。
（3） AJAX 请求不能发送。
关于Cookie：
两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置document.domain共享 Cookie。
A网页通过脚本设置一个cookie

document.cookie = "test1=hello";

B网页就可以读到这个 Cookie。

var allCookie = document.cookie;

注意，这种方法只适用于 Cookie 和 iframe 窗口,LocalStorage 和 IndexDB 无法通过这种方法，规避同源政策，而要使用下文介绍的PostMessage API。

服务器也可以在设置Cookie的时候，指定Cookie的所属域名为一级域名

Set-Cookie: key=value; domain=.example.com; path=/

关于iframe
如果两个网页不同源，就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。

document.getElementById("myIFrame").contentWindow.document
// Uncaught DOMException: Blocked a frame from accessing a cross-origin frame.

上面命令中，父窗口想获取子窗口的DOM，因为跨源导致报错。
反之亦然，子窗口获取主窗口的DOM也会报错。

window.parent.document.body
// 报错

对于完全不同源的网站，目前有三种方法，可以解决跨域窗口的通信问题。

1.片段识别符（fragment identifier）
2.window.name
3.跨文档通信API（Cross-document messaging）

破解方法：
1.片段识别符
片段标识符（fragment identifier）指的是，URL的#号后面的部分，比如http://example.com/x.html#fragment的#fragment。如果只是改变片段标识符，页面不会重新刷新。
父窗口可以把信息，写入子窗口的片段标识符。

var src = originURL + '#' + data;
document.getElementById('myIFrame').src = src;

子窗口通过监听hashchange事件得到通知。

window.onhashchange = checkMessage;

function checkMessage() {
  var message = window.location.hash;
  // ...
}

同样的，子窗口也可以改变父窗口的片段标识符。

parent.location.href= target + "#" + hash;

2.window.name
浏览器窗口有window.name属性。这个属性的最大特点是，无论是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页可以读取它。
父窗口先打开一个子窗口，载入一个不同源的网页，该网页将信息写入window.name属性。

window.name = data;

接着，子窗口跳回一个与主窗口同域的网址。

location = '[http://parent.url.com/xxx.html](http://parent.url.com/xxx.html)';

主窗口就可以读取子窗口的window.name

var data = document.getElementById('myFrame').contentWindow.name;

这种方法的优点是，window.name容量很大，可以放置非常长的字符串；缺点是必须监听子窗口window.name属性的变化，影响网页性能。
3.window.postMessage
允许跨窗口通信，不论这两个窗口是否同源。
举例来说，父窗口http://aaa.com向子窗口http://bbb.com发消息，调用postMessage方法就可以了。

var popup = window.open('[http://bbb.com](http://bbb.com/)', 'title');
popup.postMessage('Hello World!', '[http://bbb.com](http://bbb.com/)');

postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送。
子窗口向父窗口发送消息

window.opener.postMessage('Nice to see you', '[http://aaa.com](http://aaa.com/)');

父窗口和子窗口都可以通过message事件，监听对方的消息。

window.addEventListener('message', function(e) {
  console.log(e.data);
},false);

message事件的事件对象event，提供以下三个属性。

event.source：发送消息的窗口
event.origin: 消息发向的网址
event.data: 消息内容

下面的例子是，子窗口通过event.source属性引用父窗口，然后发送消息。

window.addEventListener('message', receiveMessage);
function receiveMessage(event) {
  event.source.postMessage('Nice to see you!', '*');
}

event.origin属性可以过滤不是发给本窗口的消息。

window.addEventListener('message', receiveMessage);
function receiveMessage(event) { 
  if (event.origin !== '[http://aaa.com](http://aaa.com/)') return; 
  if (event.data === 'Hello World') {     event.source.postMessage('Hello', event.origin); 
  } else { console.log(event.data); 
  }
}

4.LocalStorage
通过window.postMessage，读写其他窗口的 LocalStorage 也成为了可能。
下面是一个例子，主窗口写入iframe子窗口的localStorage。

window.onmessage = function(e) {
  if (e.origin !== '[http://bbb.com](http://bbb.com/)') { return; } 
  var payload = JSON.parse(e.data);
  localStorage.setItem(payload.key,
  JSON.stringify(payload.data));
};

上面代码中，子窗口将父窗口发来的消息，写入自己的LocalStorage。
父窗口发送消息的代码如下。

var win = document.getElementsByTagName('iframe')[0].contentWindow;
var obj = { name: 'Jack};
win.postMessage(JSON.stringify({key: 'storage', data: obj}), 
'[http://bbb.com](http://bbb.com/)');

加强版的子窗口接收消息的代码如下。

window.onmessage = function(e) { 
  if (e.origin !== '[http://bbb.com](http://bbb.com/)') return; 
  var payload = JSON.parse(e.data); 
  switch (payload.method) { 
    case 'set': 
      localStorage.setItem(payload.key, JSON.stringify(payload.data)); 
      break; 
    case 'get':
      var parent = window.parent; 
      var data = localStorage.getItem(payload.key); 
      parent.postMessage(data, '[http://aaa.com](http://aaa.com/)');
      break; 
    case 'remove': 
      localStorage.removeItem(payload.key); 
      break; }
};

加强版的父窗口发送消息代码如下。

var win = document.getElementsByTagName('iframe')[0].contentWindow;
var obj = { name: 'Jack' };
// 存入对象
win.postMessage(JSON.stringify({key: 'storage', method: 'set', data: obj}), '[http://bbb.com](http://bbb.com/)');
// 读取对象
win.postMessage(JSON.stringify({key: 'storage', method: "get"}), "*");
window.onmessage = function(e) {
 if (e.origin != '[http://aaa.com](http://aaa.com/)') return;  
// "Jack" 
console.log(JSON.parse(e.data).name);};

3.JSONP 的原理是什么
JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。
它的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。不过它只能发get请求。
首先，网页动态插入<script>元素，由它向跨源网址发出请求。

function addScriptTag(src) {
  var script = document.createElement('script');   
  script.setAttribute("type","text/javascript"); 
  script.src = src; document.body.appendChild(script);
}
window.onload = function () {   
  addScriptTag('[http://example.com/ip](http://example.com/ip)?callback=foo');    
                                                      //回调函数callback
}
function foo(data) { 
  console.log('Your public IP address is: ' + data.ip);
};

上面代码通过动态添加<script>元素，向服务器example.com发出请求。注意，该请求的查询字符串有一个callback参数，用来指定回调函数的名字，这对于JSONP是必需的。
服务器收到这个请求以后，会将数据放在回调函数的参数位置返回。

foo({
  "ip": "8.8.8.8"
});

由于<script>元素请求的脚本，直接作为代码运行。这时，只要浏览器定义了foo函数，该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象，而不是字符串，因此避免了使用JSON.parse的步骤。

4.CORS是什么
CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）
只要同时满足以下两大条件，就属于简单请求。

（1) 请求方法是以下三种方法之一：
HEAD
GET
POST
（2）HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、
              multipart/form-data、text/plain

凡是不同时满足上面两个条件，就属于非简单请求。
浏览器对这两种请求的处理，是不一样的。
对于简单请求，浏览器直接发出CORS请求
就是在头信息之中，增加一个Origin字段

GET /cors HTTP/1.1
Origin: [http://api.bob.com](http://api.bob.com/)
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

上面的头信息中，Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。
如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段（详见下文），就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。注意，这种错误无法通过状态码识别，因为HTTP回应的状态码有可能是200。
如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。

//该字段必须，值为origin或者"*"
Access-Control-Allow-Origin: [http://api.bob.com](http://api.bob.com/)

/*
该字段可选,表示是否允许发送Cookie,该值默认为true，
如果服务器不要浏览器发送Cookie，删除该字段即可。
*/
Access-Control-Allow-Credentials: true

//该字段可选，如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

上面的头信息之中，有三个与CORS请求相关的字段，都以Access-Control-开头。

非简单请求
1.预检请求
非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。

var url = '[http://api.alice.com/cors](http://api.alice.com/cors)';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();

上面代码中，HTTP请求的方法是PUT，并且发送一个自定义头信息X-Custom-Header。
浏览器发现，这是一个非简单请求，就自动发出一个"预检"请求，要求服务器确认可以这样请求。下面是这个"预检"请求的HTTP头信息。

OPTIONS /cors HTTP/1.1
Origin: [http://api.bob.com](http://api.bob.com/)
Access-Control-Request-Method: PUTAccess-Control-Request-Headers: X-Custom-Header
Host: api.alice.comAccept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

"预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源。

2.预检请求的回应
服务器收到"预检"请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: [http://api.bob.com](http://api.bob.com/)
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

上面的HTTP回应中，关键的是Access-Control-Allow-Origin字段，表示http://api.bob.com可以请求数据。该字段也可以设为星号，表示同意任意跨源请求。

Access-Control-Allow-Origin: *

如果浏览器否定了"预检"请求，会返回一个正常的HTTP回应，但是没有任何CORS相关的头信息字段。这时，浏览器就会认定，服务器不同意预检请求，因此触发一个错误，被XMLHttpRequest对象的onerror回调函数捕获。控制台会打印出如下的报错信息。

XMLHttpRequest cannot load http://api.alice.com.
Origin http://api.bob.com is not allowed by Access-Control-Allow-Origin.

3.浏览器的正常请求和回应
一旦服务器通过了"预检"请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。
下面是"预检"请求之后，浏览器的正常CORS请求。

PUT /cors HTTP/1.1
Origin: [http://api.bob.com](http://api.bob.com/)
Host: api.alice.com
X-Custom-Header: value
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

上面头信息的Origin字段是浏览器自动添加的。
下面是服务器正常的回应。

Access-Control-Allow-Origin: [http://api.bob.com](http://api.bob.com/)
Content-Type: text/html; charset=utf-8

上面头信息中，Access-Control-Allow-Origin字段是每次回应都必定包含的。

与JSONP的比较
CORS与JSONP的使用目的相同，但是比JSONP更强大。
JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

5.根据视频里的讲解演示三种以上跨域的解决方式
JSONP:

<!DOCTYPE html>
<html>
<head>
    <title>JSONP</title>
    <style type="text/css">
        ul,li{
            list-style: none;
        }
        li:hover{
            color: #fff;
            background-color: #6ff;
        }
        .news{
            margin: auto;
        }
        li{
            margin: 10px ;
        
        }
        .btn {
            outline: none;
            border: 1px solid #ddd;
            color: #000;
            background-color: #fff;
            border-radius: 3px;
            display: block;
            margin: 15px 50px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="ct">
        <ul class="news">
            <li>第11日前瞻，中国冲击4金，博尔特再战</li>
            <li>男双力争会师决赛</li>
            <li>女排将死磕巴西！</li>
        </ul>
        <button class="btn">换一组</button>
    </div>
    
    <script type="text/javascript">
        function $(e){
            return document.querySelector(e);
        }
        $('.btn').addEventListener('click',function(){
            var script = document.createElement('script')
            script.src = 'http://a.hgz.com:8080/getNews?callback=foo'
            document.head.appendChild(script)
            document.head.removeChild(script)
        })

        function foo(news){
            var html = ''
            for(var i =0; i<news.length;i++){
                html+= '<li>' + news[i] + '</li>'
            }
            $('.news').innerHTML = html
        }
    </script>
</body>
</html>

router.js

app.get('/getNews', function(req, res){
     var news = [
     "第11日前瞻，中国冲击4金，博尔特再战",
     "男双力争会师决赛",
     "女排将死磕巴西！郎平安排男陪练模仿对方核心",
     "没有中国选手和巨星的110米栏 我们还看吗",
     "中英上演奥运金牌大战",
     "博彩赔率挺中国夺回第二纽约时报：中国因对手服禁药而丢失的奖牌最多",
     "[边界] 最“出柜”奥运 同性之爱闪耀里约",
     "[特评] 下跪拜谢与洪荒之力一样 都是真情流露"
     ]

     var data = []
     for(var i = 0; i<3; i++){
        var index = parseInt(Math.random()*news.length);
        data.push(news[index])
        news.splice(index, 1)    //保证3条信息不重复
     }

     var cb = req.query.callback;    //必须重新声明callback

     res.send(cb + '(' + JSON.stringify(data) + ')');    //生成foo(news)的形式的字符串
})

CORS
代码与ajax几乎一样

<!DOCTYPE html>
<html>
<head>
    <title>JSONP</title>
    <style type="text/css">
        ul,li{
            list-style: none;
        }
        li:hover{
            color: #fff;
            background-color: #6ff;
        }
        .news{
            margin: auto;
        }
        li{
            margin: 10px ;
        
        }
        .btn {
            outline: none;
            border: 1px solid #ddd;
            color: #000;
            background-color: #fff;
            border-radius: 3px;
            display: block;
            margin: 15px 50px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="ct">
        <ul class="news">
            <li>第11日前瞻，中国冲击4金，博尔特再战</li>
            <li>男双力争会师决赛</li>
            <li>女排将死磕巴西！</li>
        </ul>
        <button class="btn">换一组</button>
    </div>
    
    <script type="text/javascript">
        function $(e){
            return document.querySelector(e);
        }
        $('.btn').addEventListener('click',function(){
            var xhr = new XMLHttpRequest()
            xhr.open('get', 'http://hgz.com:8080/getNews', true)
            xhr.send()
            xhr.onreadystatechange = function(){
                if (xhr.readyState === 4){
                    if (xhr.status ===200 || xhr.status=== 304){
                        foo(JSON.parse(xhr.responseText))
                    }
                }
            }
            
        })
        function foo(news){
            var html = ''
            for(var i =0; i<news.length;i++){
                html+= '<li>' + news[i] + '</li>'
            }
            $('.news').innerHTML = html
        }
    </script>
</body>
</html>

router.js

app.get('/getNews', function(req, res){
     var news = [
     "第11日前瞻，中国冲击4金，博尔特再战",
     "男双力争会师决赛",
     "女排将死磕巴西！郎平安排男陪练模仿对方核心",
     "没有中国选手和巨星的110米栏 我们还看吗",
     "中英上演奥运金牌大战",
     "博彩赔率挺中国夺回第二纽约时报：中国因对手服禁药而丢失的奖牌最多",
     "[边界] 最“出柜”奥运 同性之爱闪耀里约",
     "[特评] 下跪拜谢与洪荒之力一样 都是真情流露"
     ]

     var data = []
     for(var i = 0; i<3; i++){
        var index = parseInt(Math.random()*news.length);
        data.push(news[index])
        news.splice(index, 1)
     }
     res.header("Access-Control-Allow-Origin", "http://hgz.com:8080")    //返回的res头部加上Origin
     // res.header("Access-Control-Allow-Origin", "*")
     res.send(data);
})

演示

gif002.gif

降域
a.html

<!DOCTYPE html>
<html>

    <title></title>

<style type="text/css">
    .ct{
        width: 910px;
        margin: auto;
    }
    .main{
        float: left;
        width: 450px;
        height: 300px;
        border: 1px solid #ccc;
    }
    .main input {
        margin: 20px;
        width: 200px;
    }

    .iframe{
        float: right;
    }

    iframe{
        width: 450px;
        height: 300px;
        border: 1px dashed #ccc;
    }
</style>

    <div class="ct">
        <h1>使用降域实现跨域</h1>
        <div class="main">
            <input type="text" placeholder="http://a.hgz.com:8080/a.html">
        </div>
        <iframe src="http://a.hgz.com:8080/b.html" frameborder="0"></iframe>
    </div>
    <script type="text/javascript">
        //URL:http//a.hgz.com:8080/a.html
         document.querySelector('.main input').addEventListener('input', function(){
            console.log(this.value)
            window.frames[0].document.querySelector('input').value = this.value
         })

         document.domain = 'hgz.com'
    </script>
</html>

b.html

<!DOCTYPE html>
<html>

    <style type="text/css">
        html,body{
            margin: 0;
        }
        input{
            margin: 20px;
            width: 200px;
        }
    </style>
    <input id="input" type="text" placeholder="http://b.hgz.com:8080/b.html">
    <script>
        // URL:http://b.hgz.com:8080/b.html
        document.querySelector('#input').addEventListener('input',function(){
            window.parent.document.querySelector('input').value = this.value
        })

        document.domain = 'hgz.com';
    </script>

</html>

postMessage
a.html

<!DOCTYPE html>
<html>

    <title></title>

<style type="text/css">
    .ct{
        width: 910px;
        margin: auto;
    }
    .main{
        float: left;
        width: 450px;
        height: 300px;
        border: 1px solid #ccc;
    }
    .main input {
        margin: 20px;
        width: 200px;
    }

    .iframe{
        float: right;
    }

    iframe{
        width: 450px;
        height: 300px;
        border: 1px dashed #ccc;
    }
</style>

    <div class="ct">
        <h1>使用降域实现跨域</h1>
        <div class="main">
            <input type="text" placeholder="http://a.hgz.com:8080/a.html">
        </div>
        <iframe src="http://b.hgz.com:8080/b.html" frameborder="0"></iframe>
    </div>
    <script type="text/javascript">
        //URL:http//a.hgz.com:8080/a.html

        function $(e){
            return document.querySelector(e)
        }

         $('.main input').addEventListener('input', function(){
            console.log(this.value)
            window.frames[0].postMessage(this.value, '*')
         })    //左边为消息，右边同意任意跨源请求

         window.addEventListener('message', function(e){
            $('.main input').value = e.data
         })
        
    </script>
</html>

b.html

<!DOCTYPE html>
<html>

    <style type="text/css">
        html,body{
            margin: 0;
        }
        input{
            margin: 20px;
            width: 200px;
        }
    </style>
    <input id="input" type="text" placeholder="http://b.hgz.com:8080/b.html">
    <script>
        // URL:http://b.hgz.com:8080/b.html

        function $(e){
            return document.querySelector(e)
        }

         $('#input').addEventListener('input', function(){
            
            window.parent.postMessage(this.value, '*')
         })

         window.addEventListener('message', function(e){
            $('#input').value = e.data
            console.log(e.data)
         })
    </script>

</html>

演示

gif003.gif

文章摘录自阮一峰的网络日志浏览器同源政策及其规避方法和跨域资源共享 CORS 详解

最后编辑于：2017.12.06 04:28:36

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,456评论 5赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,370评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,337评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,583评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,596评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,572评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,936评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,595评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,850评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,601评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,685评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,371评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,951评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,934评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,167评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,636评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,411评论 2赞 342

进阶13-JSONP跨域

推荐阅读更多精彩内容