前端跨域请求原理及实践

name)

}

办事器 3000请求页面还包含一个 script 标签：

办事器 3001上对应的处理函数：

app.get('/jsonServerResponse', function(req, res) { 
 
    var cb = req.query.jsonp 
 
    console.log(cb) 
 
    var data = 'var data = {' + 'name: $("#name").val() + " - server 3001 jsonp process",' + 'id: $("#id").val() + " - server 3001 jsonp process"' + '};' 
 
    var debug = 'console.log(data);' 
 
    var callback = '$("#submit").click(function() {' + data + cb + '(data);' + debug + '});' 
 
    res.send(callback) 
 
    res.end() 
 
})

与膳绫擎一样，我们在所获取的参数后面加上 “ – server 3001 jsonp process” 代表办事器对数据的操作。大年夜代码中我么可以看到，处理函数除了根据参数做响应的处理，更多的也是进行字符串的拼接。

最终的结不雅为：

2.4 JSONP 总结

至此，我们懂得了 JSONP 的道理以及实现方法，它帮我们实现前端跨域请求，然则在实践的过程中，我们照样可以发明它的不足：

只能应用 GET 办法提议请求，这是因为 script 标签自身的限制决定的。

不克不及很好的发明缺点，并进行处理。与 Ajax 比较，因为不是经由过程 XmlHttpRequest 进行传输，所以不克不及注册 success、 error 等事宜监听函数。

三、应用 CORS 实现跨域调用

3.1 什么是 CORS?

Cross-Origin Resource Sharing(CORS)跨域资本共享是一份浏览器技巧的规范，供给了 Web 办事大年夜不合域传来沙盒脚本的办法，以避开浏览器的同源策略，是 JSONP 模式的现代版。与 JSONP 不合，CORS 除了 GET 请求办法以外也支撑其他的 HTTP 请求。用 CORS 可以让网页设计师用一般的 XMLHttpRequest，这种方法的缺点处理比 JSONP 要来的好。另一方面，JSONP 可以在不支撑 CORS 的老旧浏览器上运作。现代的浏览器都支撑 CORS。

3.2 CORS 的实现

照样以办事器 3000 上的请求页面向办事器 3001 发送请求为例。

办事器 3000 上的请求页面 JavaScript 不变，如下：

$(function() { 
 
    $("#submit").click(function() { 
 
        var data = { 
 
            name: $("#name").val(), 
 
            id: $("#id").val() 
 
        }; 
 
        $.ajax({ 
 
            type: 	
			 5/7   首页 上一页 3 4 5 6 7 下一页 尾页	
			

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


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