跨域资源共享与JSONP

跨域资源共享

　　　　1.CORS是什么　　

　　　　　　

    //1.CORS是什么
            //const url = 'https://www.imooc.com';//不同域
            const url ='https://www.imooc.com/api/http/search/suggest?words=js';
            const xhr = new XMLHttpRequest();
            xhr.onreadystatechange = () => {
                  if (xhr.readyState != 4) return;
                  if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                    console.log(xhr.responseText);
                  }
                };
                xhr.open('GET', url, true);
                xhr.send(null);
                
                
                //Access-Control-Allow-Origin: *
                //表名允许所有域名来跨域请求它，*是通配符，没有任何限制
                
                //只允许指定域名的跨域请求
                Access-Control-Allow-Origin:http://127.0.0.1:5500

 

　　　　　　

　　　　2.使用CORS跨域的过程

　　　　　　　　浏览器发送请求　　

　　　　　　　　后端在响应头中添加Access-Control-Allow-Origin 头信息　　

　　　　　　　　浏览器接收到响应

　　　　　　　　如果是同城下的请求，浏览器不会额外做什么，这次前后端通信就圆满完成了

　　　　　　　　如果是跨域请求，浏览器会从响应头中查找是否允许跨越访问

　　　　　　　　如果允许跨域，通信圆满完成

     　　　　　　  如果没有找到或者不好含想要跨域的域名，就丢弃响应结果

　　　   3.CORS的兼容性

　　　　　　　　IE10及以上版本的浏览器可以正常使用CORS　　　　

JSONP

　　　　1.JSONP的原理

　　　　　　　　script标签跨域不会被浏览器阻止
　　　　　　　　JSONP主要就是利用script标签，加载跨域文件

 

　　　　2.使用JSONP实现跨域 

　　　　　　　　服务器端准备好JSONP接口

　　　　　　　　https://www.imooc.com/api/http/jsonp?callback=handleResPonse

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JSONP</title>
    </head>
    <body>
        <script>
            //1.JSONP的原理
            //script标签跨域不会被浏览器阻止
            //JSONP主要就是利用script标签，加载跨域文件
            
            
            //2.使用JSONP实现跨域
            //服务器端准备好JSONP实现跨域
            
            //手动加载JSONP接口 或者动态加载JSONP接口
            
            const script = document.createElement('script');
            script.src ='https://www.imooc.com/api/http/jsonp?callback=ab';
            document.body.appendChild(script)
            
            
            //声明函数
            const ab = data =>{
                console.log(data)
            };
            
/*             ab({ 
            "code": 200, "data": [ { "word": "jsp" }, 
            { "word": "js" }, { "word": "json" },   
            { "word": "js 入门" }, { "word": "jstl" } ] });
 */
        </script>
        <!-- <script src="https://www.imooc.com/api/http/jsonp?callback=ab"></script> -->
        <!-- 相当于 -->
        <!-- <script>
            { "code": 200, "data": [ { "word": "jsp" }, { "word": "js" }, { "word": "json" }, { "word": "js 入门" }, { "word": "jstl" } ] }
        </script>     -->
    </body>
</html>

 

　　　　　　　　

 

 

　　　　　　　　

　　　　

posted @ 2023-03-23 11:25  zj勇敢飞，xx永相随  阅读(23)  评论(0)  编辑  收藏  举报