经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JSON » 查看文章
ajax跨域问题解决方案(jsonp,cors)
来源:cnblogs  作者:我却醉的像条狗  时间:2019/6/11 9:24:25  对本文有异议

跨域

跨域有三个条件,满足任何一个条件就是跨域
 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:

 

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

 运行结果:

 

 

 总结一下:

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

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

 

2.cors

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

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

 html:

  1. <body>
  2. <form action="/" method="post" enctype="multipart/form-data" id="form">
  3. <input type="text" name="xinxi" id="info"><br>
  4. <input type="button" value="提交" name="submit" id="btn">
  5. </form>
  6. </body>
  7. <script src="./jquery.js"></script>
  8. <script>
  9. $('#btn').on('click', function () {
  10. $.ajax({
  11. url: 'http://soul:8888/kuayu',
  12. type:'delete',
  13. async:false,
  14. success: function (data) {
  15. alert(data);
  16. },
  17. })
  18. })
  19. </script>

 

js代码:

  1. var http = require('http');
  2. var url = require('url');
  3. var server = http.createServer();
  4. server.listen('8888',function(){
  5. console.log('8888');
  6. });
  7. server.on('request',function(req,res){

    // 允许所有请求域
    // res.setHeader('Access-Control-Allow-Origin','*');
    // 只允许具体的一个域进行数据共享
    // res.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:8000');

  1.    var urls = url.parse(req.url,true);
  2. res.setHeader('Access-Control-Allow-Origin','*');
  3. if(req.method == 'POST' || req.method == 'GET'){
  4. if(urls.pathname == '/kuayu'){
  5. res.end('hello,world');
  6. }
        // 客户端发送预先检查请求,响应会客户端,
  7. }else if(req.method == 'OPTIONS'){
  8. res.setHeader('Access-Control-Allow-Methods', 'DELETE');//设置所允许的真是请求(delete,put等)
  9. res.end('');
      // 客户端发送真实请求,响应数据
  10. }else if(req.method == 'DELETE'){
  11. res.end('Bye');
  12. }
  13. });

 

效果:

 

 

 

   很多人也认为使用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 请求方法。

 

 

 

 

原文链接:http://www.cnblogs.com/ruoruchujian/p/10999143.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号