远程服务器上设法动态的把数据装进js格式的文本代码段中,供客户端调用和进一步处理。这篇文章主要介绍了ajax跨域问题解决方案(jsonp,cors) ,需要的朋友可以参考下

跨域

跨域有三个条件,任何一个条件就是跨域

 1:服务器端口不一致
 2:协议不一致
 3:域名不一致

解决方案:

1.jsonp

在远程服务器上设法动态的把数据装进js格式的文本代码段中,供客户端调用和进一步处理;在前台通过动态添加script标签及src属性,表面看上去与ajax极为相似,但是,这和ajax并没有任何关系;为了便于使用及交流,逐渐形成了一中非正式传输协议,人们把它称作 jsonp 。

代码如下:

html:

<body>
  <form action="/" method="post" enctype="multipart/form-data">
    <input type="text" name="xinxi" id="info"><br>
    <input type="file" name="file" id="file"><br>
    <input type="button" value="提交" name="submit" id="btn">
  </form>
</body>
<script src="./jquery.js"></script>
<script>
  //提前写好函数,调用函数需要传参
  function callback(data){
    alert(data);
  }
  //动态添加script标签及src属性
  $('#btn').on('click',function(){
    var sc = document.createElement('script');
    sc.src = 'http://soul:8888/kuayu?cb=callback';
    $('head').append(sc); 
  })
</script>  

js:

var http = require('http');
 var url = require('url');
 var server = http.createServer();
 server.listen('8888',function(){
   console.log('8888');
 });
 server.on('request',function(req,res){
   var urls = url.parse(req.url,true);
   if(urls.pathname == '/kuayu'){
     res.end('callback("jsonp")');//返回的数据需是前端定义的函数调用的形式
   }
 });

 运行结果:

 总结一下:

jsonp的一个要点就是允许用户传递一个callback参数给服务端, 然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据, 这样客户端就可以随意定制自己的函数来自动处理返回数据了。

发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如script、img、iframe; src 的能力就是把远程的数据资源加载到本地(图片、JS代码等);

2.cors

cors跨域的核心点是在服务端代码中设置一个响应头即可

res.setHeader('Access-Control-Allow-Origin','*');

 html:

<body>
  <form action="/" method="post" enctype="multipart/form-data" id="form">
    <input type="text" name="xinxi" id="info"><br>
    <input type="button" value="提交" name="submit" id="btn">
  </form>
</body>
<script src="./jquery.js"></script>
<script>
  $('#btn').on('click', function () {      
        $.ajax({
            url: 'http://soul:8888/kuayu',
            type:'delete',  
            async:false,
            success: function (data) {
              alert(data);
            },
        })
  })
</script>

js代码:

<body>
  <form action="/" method="post" enctype="multipart/form-data" id="form">
    <input type="text" name="xinxi" id="info"><br>
    <input type="button" value="提交" name="submit" id="btn">
  </form>
</body>
<script src="./jquery.js"></script>
<script>
  $('#btn').on('click', function () {      
        $.ajax({
            url: 'http://soul:8888/kuayu',
            type:'delete',  
            async:false,
            success: function (data) {
              alert(data);
            },
        })
  })
</script>

效果:

 很多人也认为使用CORS解决跨域很简单,只需要在服务器添加响应头 “ Access-Control-Allow-Origin :* ” 就可以了,

其实不然,因为在CORS中,所有的跨域请求被分为了两种类型,一种是简单请求,一种是复杂请求 (严格来说应该叫‘需预检请求');简单请求与普通的ajax请求无异;但复杂请求,必须在正式发送请求前先发送一个OPTIONS方法的请求已得到服务器的同意,若没有得到服务器的同意,浏览器不会发送正式请求;

以下所有条件,被视为简单类型的请求:

1:请求方法必须是 GET、HEAD、POST中的一种,其他方法不行;

2:请求头类型只能是 Accept、Accept-Language、Content-Language、Content-Type,添加其他额外请求头不行;

3:请求头 Content-Type 如果有,值只能是 text/plain、multipart/form-data、application/x-www-form-urlencoded 中的一种,其他值不行;

4:请求中的任意 XMLHttpRequestUpload  对象均没有注册任何事件监听器;

5:请求中没有使用 ReadableStream 对象。(以上摘自西岭老湿微信公众号)

总结一下:

如果请求方式为get和post简单请求,则只需要设置响应头:res.setHeader('Access-Control-Allow-Origin','*');来允许某一个域 或者 所有域进行数据共享;

若是其他方式的请求,会在发送真正的请求之前发送一个options请求,通过options请求里设置:res.setHeader('Access-Control-Allow-Methods', 'DELETE'),

告知服务器正式请求会使用哪一种 HTTP 请求方法。

总结

以上所述是小编给大家介绍的Ajax跨域问题及解决方案(jsonp,cors),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对爱安网网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

最新资讯
降噪版AirPods本月底就发布? 这比之前的预测都快

降噪版AirPods本月底

在iOS 13.2的Beta版中,曾经出现过一个貌似是入耳式AirP
台媒:苹果将于10月底发布新AirPods 售价超1800元

台媒:苹果将于10月底发

市场传出,苹果新一代 AirPods将于10月底亮相,取名为AirP
高通骁龙700系列首款5G SoC处理器跑分曝光

高通骁龙700系列首款5

高通首款5G SoC处理器代号或为骁龙SM7250(非正式定名),目
胡锡进:扎克伯格攻击中国互联网管理 背后是FB的困境

胡锡进:扎克伯格攻击

胡锡进:扎克伯格突然攻击中国互联网管理,背后是脸书的困
从BAT到ATM时代:美团是如何练成的

从BAT到ATM时代:美团是

曹升2019年10月8日,美团市值首次突破5000亿港币,成为仅
摩根大通CEO戴蒙:Libra是一个永远不会实现的好主意

摩根大通CEO戴蒙:Libra

戴蒙发表上述言论之际,许多企业合作伙伴已经退出了Libr
最新文章
Ajax原理与应用案例快速入门教程

Ajax原理与应用案例快

这篇文章主要介绍了Ajax原理与应用案例,结合实例形式
Ajax提交post请求案例分析

Ajax提交post请求案例

这篇文章主要介绍了Ajax提交post请求,结合具体案例形
Ajax返回值类型与用法实例分析

Ajax返回值类型与用法

这篇文章主要介绍了Ajax返回值类型与用法,结合实例形
不使用XMLHttpRequest对象实现Ajax效果的方法小结

不使用XMLHttpRequest

这篇文章主要介绍了不使用XMLHttpRequest对象实现Ajax
关于Ajax跨域问题及解决方案详析

关于Ajax跨域问题及解

这篇文章主要给大家介绍了Ajax跨域问题以及解决方案的
Ajax请求跨域问题解决方案分析

Ajax请求跨域问题解决

这篇文章主要介绍了Ajax请求跨域问题解决方案,结合具