首页 > 开发 > AJAX > 正文

Ajax跨域问题及解决方案(jsonp,cors)

2024-09-01 08:26:46
字体:
来源:转载
供稿:网友

跨域

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

 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>            
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表