同源策略与跨越及解决方案,JSONP技术,跨域资源共享CORS,代理服务器技术

阿尭

于 2022-09-21 11:39:40 发布

阅读量306

点赞数

文章标签：服务器 ajax javascript

本文链接：https://blog.csdn.net/qq_63322025/article/details/126965543

版权

跨越及解决方案

同源策略
什么是跨域
跨域解决方案

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

什么是跨域：

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

例如：从前端去访问后端的服务器会存在跨域问题，会报错：（即使是同一台服务器，但是端口号不同也会报错）

JSONP技术：

首先，不知道大家有没有注意，不管是我们的script标签的src还是img标签的src，或者说link标签的href他们没有被同源策略所限制，

比如我们有可能使用一个网络上的图片，就可以请求得到，<img src="https://ss3.baidu.com/aa.jpg/>

jsonp就是使用同源策略这一“漏洞”，实现的跨域请求

其基本原理是利用HTML的<script>标签天生可以跨域这一特点，用其加载另一个域的JSON数据，

加载完成后会自动运行一个回调函数通知调用者。此过程需要另一个域的服务端支持，所以这种方式实现的跨域并不是任意的。

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

jsonp技术实现：

利用HTML的<script>标签天生可以跨域这一特点解决跨域问题，动态创建script标签，将请求url地址作为script标签src属性值

jsonp需要服务端支持，把真正的数据封装到一个函数中一起返回

jsonp弊端：jsonp仅仅用于get请求

 <!-- 
        jsonp技术实现
           1. jsonp技术利用script标签天生可以跨域特点解决跨域问题
             代码动态创建script标签，将请求url地址作为script标签src属性值
           2. jsonp需要服务端支持
               把真正的数据封装到一个函数中一起返回
               {code:1,info:'helloworld'}
               callback({code:1,info:'helloworld'})
               
         缺点: 只支持get请求

     -->
     <!-- <script src="http://10.7.162.67:3000/"></script> -->
</head>
<body>
    <script>
        sendProductList('http://10.7.162.67:3000')

        function sendProductList(url){
            let scriptEle = document.createElement('script') // <script>
            scriptEle.setAttribute('src',url)
            document.body.appendChild(scriptEle)
        }
        function callback(res){
            let resObj = JSON.parse(res)
            console.log(res)
            console.log(resObj)

        }



    </script>
</body>