前端跨域请求原理及实践

res.end()

})

<script src = 'http://localhost:3001/jsonServerResponse?jsonp=jsonpCallback'></script>

这里必定要留意 data 中字符串拼接，不克不及直接将 JSON 格局的 data 直接传给回调函数，不然会产生编译缺点： parsererror Error: jsonpCallback was not called。

其实脑海里应当有一个概念：应用 JSONP 格局返回的值一段要急速履行的 JavaScript 代码，所以不会像 ajax 的 XmlHttpRequest 那样可以监听不合事宜对数据进行不合处理。

处理结不雅如下所示：

那么数据是若何传输的呢?HTTP 请求头的第一行如下：

经由膳绫擎的事宜，你是不是认为 JSONP 的实现和 Ajax 大年夜同小异?

其实，因为实现的道理不合，由 JSONP 实现的跨域调用不是经由过程 XmlHttpRequset 对象，而是经由过程 script 标签，所以在实现道理上，JSONP 和 Ajax 已经一点关系都没有了。看上去情势类似只是因为 jQuery 对 JSONP 做了封装和转换。

比如在膳绫擎的例子中，我们假设要传输的数据 data 格局如下：

pp.post('/ajax/deal', function(req, res) { 
 
    console.log("server accept: ", req.body.name, req.body.id) 
 
    var data = { 
 
        name: req.body.name + ' - server 3000 process', 
 
        id: req.body.id + ' - server 3000 process' 
 
    } 
 
    res.send(data) 
 
    res.end() 
 
})

{ 
 
name: "chiaki", 
 
id": "3001" 
 
}

GET /ajax/deal?callback=jsonpCallback&name=chiaki&id=3001&_=1473164876032 HTTP/1.1

可见，即使情势上是用 POST 传输一个 JSON 格局的数据，其实发送请求时照样转换成 GET 请求。

其实如不雅懂得 JSONP 的道理的话就不难解得为什么只能应用 GET 请求办法了。因为是经由过程 script 标签进行请求，所以上述传输过程根本上是以下的情势：

<script src = 'http://localhost:3001/ajax/deal?callback=jsonpCallback&name=chiaki&id=3001&_=1473164876032'></script>

Specifies the method or methods allowed when accessing the resource. This is used in response to a preflight request. The conditions under which a request is preflighted are discussed above.

Access-Control-Allow-Headers

如许大年夜办事器返回的代码就可以直接在这个 script 标签中运行了。下面我们本身实现一个 JSONP：

function jsonpCallback(data) { 
 
    console.log("jsonpCallback: "+data.	
			 4/7   首页 上一页 2 3 4 5 6 7 下一页 尾页	
			

　　推荐阅读
　　PinDemonium通用动态脱壳工具
            
            一、简介本文是对16年的blackhat大年夜会上PinDemonium通用动态脱壳对象介绍。1. 通用脱壳对象简介通用脱壳对象可以经由过程以下办法实现：    -debuggers    -kernel modules    -hyperv>>>详细阅读


本文标题：前端跨域请求原理及实践
地址：http://www.17bianji.com/lsqh/35417.html
 1/2    1