js-22同源策略

01同源策略

含义:同源策略是浏览器的一个安全功能,不同源的网页脚本在没有明确授权的情况下,不能读写对方资源。所谓同源是指"协议+域名+端口"三者相同

​```
1. 浏览器的一个安全功能
	如果不使用浏览器此安全策略对你没影响
2. 同源  "协议+域名+端口"
http://www.baidu.com:80/index.html  => http://www.baidu.com:80/productlist

                                    => http://www.baidu.com:8080/productlist

                                    => http://www.sina.com:80/productlist

                                    => https://www.sina.com:80/productlist
            
3. 不同源的网页脚本在没有明确授权的情况下,不能读写对方资源。
​```
1. 浏览器的一个安全功能
	如果不使用浏览器此安全策略对你没影响
2. 同源  "协议+域名+端口"
http://www.baidu.com:80/index.html  => http://www.baidu.com:80/productlist

                                    => http://www.baidu.com:8080/productlist

                                    => http://www.sina.com:80/productlist

                                    => https://www.sina.com:80/productlist
            
3. 不同源的网页脚本在没有明确授权的情况下,不能读写对方资源。

02跨域

含义: 使用AJAX技术(XMLHttpRequest 对象),从一个网页去请求另一个网页资源时,违反浏览器同源策略限制,         引起的安全问题,称为跨域  

备注:localhost和127.0.0.1虽然都指向本机,但也属于跨域

1.跨域错误
	前后端分离项目:by CORS policy: No 'Access-Control-Allow-Origin'
2.解决跨域的方案:
	- 跨域资源共享 cors
            + 服务端设置,允许其它源访问服务端资源
            + nodejs实现:CORS 跨域资源共享
              response.setHeader('Access-Control-Allow-Origin', '*')

	- 不使用ajax技术 -> 使用jsonp技术
        
	- 代理服务器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BGDnD5Mp-1669771511418)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1649307607396.png)]

03jsonp技术【面试题考试题】

 jsonp技术基本原理
           1.利用HTML<script>标签天生可以跨域这一特点,用其加载另一个域的json数据.
           2.加载完成后会自动运行一个回调函数通知调用者。此过程需要另一个域的服务端支持
        jsonp技术实现 【大厂面试】
             jsonp条件:
                1. 服务端支持
                     响应数据包裹在一个函数中返回
                       {
                          resultCode:1,
                          resultInfo:{
                              username:'admin',
                              age:18
                          }
                       }
                      这种形式:
                      callBack({
                          resultCode:1,
                          resultInfo:{
                              username:'admin',
                              age:18
                          }
                       })

                2. 前端 后端反馈callback函数,调用显示数据 此函数自己执行
                    function callBack(data){

                    }

          缺点:
            只支持get请求

【掌握】json技术实现

<button class="btn">确定button>
    <script>
        const btn = document.querySelector('.btn')
        btn.addEventListener('click', function () {
            getProductList('http://10.7.178.115:8088/api/jsonp/list')
        })

        /*
          发生jsonp请求
            实现原理: 动态构造script标签,将请求url接口地址作为script属性src值
        */
        function getProductList(url) {
            //动态创建script标签
            let scriptEle = document.createElement('script') //
                    
                    

你可能感兴趣的:(js,javascript,前端,开发语言)