跨域问题的总结

1、为什么会有跨域问题

原因是浏览器为了安全，而采用的同源策略（Same origon policy）

2、什么是同源策略

• 同源策略是由Netscape提出的一个和著名的安全策略，现在所有支持javascript的浏览器都会使用这个策略
• web是构建在同源策略基础上的，浏览器只是针对同源策略的一种实现
• 所谓同源是指：协议，域名（IP），端口必须完全相同，即只有三者都相同才能算是在一个域里

备注：规则列举如下（假设已有网站地址为：http://study.cn）

请求地址	形式	结果
http://study.cn/test/a.html	协议，域名，端口均相同	成功
http://study.cn/user/a.html	协议，域名，端口均相同	成功
http://a.study.cn/test/a.html	域名不同	失败
http://study.cn:8080/test/a.html	端口号不同	失败
https://study.cn/test/a.html	协议不同	失败

3、没有同源策略的危险场景

有一天你刚睡醒，收到一封邮件,说是你的银行账号有风险，赶紧点进www.yinghang com改密码。你着急的赶紧点进去，还是熟悉的银行登录界面，你果断输入你的账号密码，登录进去看看钱有没有少了，睡眼朦胧的你没看清楚,平时访问的银行网站是www.yinhang.com，而现在访问的是www.yinghang.com，随后你来了一条短信，钱没了，这个钓鱼网站做了什么呢?大概是如下思路:

    <iframe id="baidu" src="https://www.baidu.com"></iframe>
    <script>
        const iframe=window.frames["baidu"];
        const inputNode=iframe.document.getElementById("输入敏感信息的input框的id");
        console.log(inputNode.value);//获取用户所输入的内容
    </script>

4、非同源受到哪些限制

• Cookie不能读取
• DOM无法获得
• Ajax请求不能发送

5、JSONP解决跨域问题

（1）jsonp是什么

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持get请求。

（2）jsonp的原理

在网页有一些标签天生具有跨域能力，比如：img link iframe script。JSONP就是利用script标签的跨域能力来发送请求的。

（3）jsonp的使用

• 原生JS封装jsonp

  前端流程：

  --创建script标签，指定src，利用标签把请求发出去

  --定义好一个数据处理的函数

  --把数据处理函数的名称传递给后端

    <button id="btn">点我发送请求</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        let btn=document.getElementById("btn");
        btn.onclick=function(){
            //1.动态创建script标签
            let scriptNode=document.createElement("script");
            //2.定义一个接收数据的函数
            window.getData=function(data){
                console.log(data);
            };
            //3.利用标签把请求发出去
            scriptNode.src="http://localhost:3000/test_get?callback=getData";
            //4.将标签放入页面，目的是把请求发出去
            document.body.appendChild(scriptNode);
        };
    </script>

后端返回符合js函数调用语法的字符串：

app.get("/test_get",(request,response)=>{
    let {callback}=request.query;
    let arr=[{name:"dexter",age:25},{name:"messi",age:32}];
    response.send(`${callback}(${JSON.stringify(arr)})`);
})

• jQuery封装jsonp

使用jQuery封装jsonp（标准写法）

$.ajax("http://localhost:3000/test_get",{
    method:"GET",
    dataType:"jsonp",
    data:{
        name:"zhangsan",
        age:32
    },
    success:function(data){
        console.log(data);
    },
    error:function(err){
        console.log(err);
    }
})

使用jQuery封装jsonp（简写）

$.getJSON("http://localhost:3000/test_get?callback=?",{
    name:"zhangsan",
    age:32}, (data)=>{
            console.log(data);
            })

后端代码与原生JS封装的一样

（4）jsonp的局限性

只能解决GET请求的跨域问题

必须要后端人员的配合

6、CORS解决跨域问题

（1）CORS是什么

CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求。

（2）CORS的工作原理

CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

（3）CORS的使用

只需要在服务器中设置一行响应头就可以解决跨域问题

response.set("Access-Control-Allow-Origin","*");

*表示允许所有的跨域请求，也可以写指定的端口号