跨域及处理跨域的三种方式

最新推荐文章于 2024-07-18 18:11:38 发布

liujian_laohan

最新推荐文章于 2024-07-18 18:11:38 发布

阅读量537

点赞数

文章标签： jsonp 跨域

本文链接：https://blog.csdn.net/liujian573281/article/details/68491687

版权

1、“跨域”：

“跨域”中的“域”是什么？不做太深奥的理论知识介绍（我也不会），直接给出一个例子：http://www.aaa.com:8080/script.js。这个我们平时经常见到的就是域名地址。把地址拆分：
http://——————–协议
www————————-子域名
aaa.com——————–主域名
8080————————端口号
script.js—————–请求资源地址
域名就由这五个部分组成，其中，当协议、子域名、主域名、端口号中的任意一个不同时，都算作不同域；当不同域之间相互请求资源时，就算作”跨域”。

2、为什么会出现“跨域”：

安全问题！！！主要就是防止CSRF（跨站请求伪造）攻击，所以JavaScript处于安全方面的考虑，不允许跨域调用其他页面的对象。

3、”跨域”问题的处理方式：

A、代理：通过在同域名的web服务器端创建一个代理，比如：在A的web服务器后台调用B服务器的服务，然后把响应的结果返回给前端；
B、JSONP（重点）：在资源加载进来之前定义好一个函数，这个函数接收一个参数（数据），函数里面利用这个参数做一些事情，然后需要的时候通过script标签加载对应远程文件资源，当远程的文件资源被加载进来的时候，就会去执行我们前面定义好的函数，并且把数据当作这个函数的参数传入进去；

<!DOCTYPE html>
<html>
    <head id="head">
        <meta charset="UTF-8">
        <title></title>
        <script>
            function fn(data){
                var oUl=document.getElementById('ul');
                var html='';
                //console.log(data);    打印出来的数据就是跨域后的数据
                //然后把获取的数据插入到前端页面显示
                for(var i=0;i<data.length;i++){
                    html+='<li>'+data[i]+'</li>';
                }
                oUl.innerHTML=html;
            }
        </script>
        <script type="text/javascript">
            window.onload=function(){
                function $(id){
                    return document.getElementById(id);
                }

                $('btn').onclick=function(){
                    //jsonp方法主要是通过script标签加载不同域的文件资源，所以在操作的时候就在head节点里插入script节点，script节点的src为不同域的地址。
                    var oScript=document.createElement('script');   
                    oScript.src='aa.txt';
                    $('head').appendChild(oScript)
                }
            }
        </script>
    </head>
    <body>
        <input type="button" name="btn" id="btn" value="加载" />
        <ul id="ul">

        </ul>
    </body>
</html>

C、XHR2：在服务器端加上：header('Access-Control-Allow-Origin:*');header('Access-Control-Allow-Methods:POST,GET');

liujian_laohan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨域及处理跨域的三种方式

1、“跨域”：“跨域”中的“域”是什么？不做太深奥的理论知识介绍（我也不会），直接给出一个例子：http://www.aaa.com:8080/script.js。这个我们平时经常见到的就是域名地址。把地址拆分： http://——————–协议 www————————-子域名 aaa.com——————–主域名 8080————————端口号 script.js—————–请求资源地址
复制链接

扫一扫