作家
登录

前端跨域请求原理及实践

作者: 来源: 2017-05-25 11:45:23 阅读 我要评论

此处数据处理成功。

因为数据请求一般都是由页面发送数据字段,办事器根据这些字段作响应的处理,如数据库萌芽,字符串操作等等。所以我们这里简单的处理数据(在数据后面加上字符串‘server 3000 process’),并且返回给浏览器,表示数据经由办事器端处理。

将请求页面中的 ajax 请求路径改为:

  1. $.ajax({ 
  2.  
  3.     ... 
  4.  
  5.     url: 'http://localhost:3001/ajax/deal'
  6.  
  7.     ... 
  8.  
  9. });  

办事器3001 对应的处理函数与 办事器3000 类似:

  1. app.post('/ajax/deal'function(req, res) { 
  2.  
  3.     console.log("server accept: ", req.body.name, req.body.id) 
  4.  
  5.     var data = { 
  6.  
  7.         name: req.body.name + ' - server 3001 process'
  8.  
  9.         id: req.body.id + ' - server 3001 process' 
  10.  
  11.     } 
  12.  
  13.     res.send(data) 
  14.  
  15.     res.end() 
  16.  
  17. })  

结不雅如下:

须要留意的是,办事器 3001 控制台有输出:

  1. server accept:  chiaki 3001 

这解释跨域请求并非是浏览器限制了提议跨站请求,而是请求可以正常提议,达到办事器端,然则办事器返回的结不雅会被浏览器拦截。

二、 应用 JSONP 实现跨域调用

2.3 应用 <script> 标签原生实现 JSONP

说道跨域调用,可能大年夜家起首想到的或者据说过的就是 JSONP 了。

2.1 什么是JSONP

办事器 3000请求页面的 JavaScript 代铝闼楝只有回调函数 jsonpCallback:

JSONP (JSON with Padding or JSON-P) is a JSON extension used by web developers to overcome the cross-domain restrictions imposed by browsers’ same-origin policy that limits access to resources retrieved from origins other than the>

  • // 回调函数 
  •  
  • function jsonpCallback(data) { 
  •  
  •     console.log("jsonpCallback: " + data.name
  •  
  •  
  • $("#submit").click(function() { 
  •  
  •     var data = { 
  •  
  •         name: $("#name").val(), 
  •  
  •         id: $("#id").val() 
  •  
  •     }; 
  •  

      推荐阅读

      PinDemonium通用动态脱壳工具

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


    本文标题:前端跨域请求原理及实践

    地址:http://www.17bianji.com/lsqh/35417.html

  • 关键词: 探索发现

    乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

    网友点评
    自媒体专栏

    评论

    热度

    精彩导读
    栏目ID=71的表不存在(操作类型=0)