跨域问题的总结
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","*");
*表示允许所有的跨域请求，也可以写指定的端口号
