ajax跨域问题解决方案（jsonp，cors）

发布时间：2020-12-16 02:50:58 所属栏目：百科来源：网络整理

导读：跨域跨域有三个条件，满足任何一个条件就是跨域 ?1：服务器端口不一致 ?2：协议不一致 ?3：域名不一致解决方案： 1.jsonp 在远程服务器上设法动态的把数据装进js格式的文本代码段中，供客户端调用和进一步处理；在前台通过动态添加script标签及src属性，

跨域

跨域有三个条件，满足任何一个条件就是跨域
?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 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){
 8     var urls = url.parse(req.url,true);
 9     if(urls.pathname == ‘/kuayu‘){
10         res.end(‘callback("jsonp")‘);//返回的数据需是前端定义的函数调用的形式
11     }
12 });

?运行结果：

?总结一下：

　　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代码：

var http = require(‘http‘);
var url = require(‘url‘);
var server = http.createServer();
server.listen(‘8888‘,function(){
    console.log(‘8888‘);
});
server.on(‘request‘,res){

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

　　 var urls = url.parse(req.url,true);
    res.setHeader(‘Access-Control-Allow-Origin‘,‘*‘);
    if(req.method == ‘POST‘ || req.method == ‘GET‘){
        if(urls.pathname == ‘/kuayu‘){
            res.end(‘hello,world‘);
        }
　　　　// 客户端发送预先检查请求，响应会客户端，
    }else if(req.method == ‘OPTIONS‘){
        res.setHeader(‘Access-Control-Allow-Methods‘,‘DELETE‘);//设置所允许的真是请求（delete，put等）
        res.end(‘‘);
　　// 客户端发送真实请求，响应数据
    }else if(req.method == ‘DELETE‘){
        res.end(‘Bye‘);
    }
    
});

效果：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!