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

程序员文章站
2022-12-29 16:52:09

跨域

跨域有三个条件，满足任何一个条件就是跨域
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 });

运行结果：

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

总结一下：

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

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

2.cors

cors跨域的核心