初识跨域&CORS跨域资源共享&JSONP

初识跨域

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>初始跨域</title>
    </head>
    <body>
        <script>
            //1.跨域是什么
     
            //同域，不是跨域
            //const url = './index.html';
            // const url = 'https://www.baidu.com';//不同域
            // const xhr = new XMLHttpRequest();
                    
                /* Access to XMLHttpRequest at 'https://www.baidu.com/' from origin 'http://127.0.0.
                1:8848' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is
                present on the requested resource.    
                     */
                    
                //想一个域发送请求，如果请求的域和当前与是不同域，就要跨域
                //不同域之间的请求，就是跨域请求    
                    
              //    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);
                              

        </script>    
    </body>
</html>

 

　CORS是什么

　　　　

　　使用CORS跨域的过程

　　　　浏览器发送请求

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

　　　　浏览器接收到响应

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

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

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

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

　　CORS的兼容性

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

　　　　JSONP

 

CORS跨域资源共享

　CORS是什么

　　　　

　　使用CORS跨域的过程

　　　　浏览器发送请求

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

　　　　浏览器接收到响应

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

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

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

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

　　CORS的兼容性

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

　　　　JSONP

 

 

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-29 15:49  漁夫  阅读(27)  评论(0)    收藏  举报