跨域、CORS、JSONP

跨域、CORS、JSONP(面试必考)

ajax和Promise的跨域问题
跨域一般用2种方案JSONP和CORS

跨域

前端与后端的交互。

关键知识
1.同源策略 浏览器故意设计的一个功能限制
2.CORS 突破浏览器限制的一个办法
3.JSONP IE时代的妥协

一.同源策略

1.同源定义
源
控制台输入window.origin或location.origin可以得到当前源
源=协议+域名+端口号
如果两个url的协议、域名、端口号完全一致，那么这两个url就是同源的。
举例

https://qq.com、https://www.baidu.com不同源
https://baidu.com、https://www.baidu.com不同源

完全一致才算同源

2.同源策略定义
浏览器规定
如果JS运行在源A里就只能获取源A的数据，不能获取源B的数据，即不允许跨域。
举例(省略http协议)
假设diaoyu.com/index.html引用了cdn.com/1.js
那么就说1.js运行在源diaoyu.com里。注意这跟cdn.com没关系，虽然1.js从它那下载
所以1.js就只能获取diaoyu.com的数据
1.js运行在哪个域名里就只能访问这个域名的数据
这是浏览器的功能，浏览器故意要这样设计的。
浏览器这么做的目的是为了保护用户隐私。

怎么保护的？(假设没有同源策略,所有的js可以访问所有的网站的数据)
以QQ空间为例
源为https://user.qzone.qq.com
假设，当前用户已登陆(登陆信息保存在浏览器Cookie里)，现在可以查看好友列表。
好友信息是通过Ajax请求/friends.json获取到的好友列表
假设，Ajax请求/friends.json可获取用户好友列表
目前为止都很正常
黑客来了
假设你的女神(黑客)分享https://qzone-qq.com 给你，实际是钓鱼网站。
你点开这个网页，这个网页也请求你的好友列表
https://user.qzone.qq.com/friends.json
请问，你的好友列表是不是就被黑客偷走了？是的
问题的根源
第1次是正常的请求，第2次是黑客的请求。几乎没有区别除了referrer

控制台的XHR是XMLHttpRequest的缩写也就是ajax的缩写

同源策略：不同源的页面之间，不准互相访问数据

实践 完整代码

做2个网站来演示下

步骤
1.创建2个目录qq-com和diaoyu-com
qq-com目录新建server.js,模拟QQ空间
diaoyu-com目录新建server.js,模拟坏人空间
先打开第1个目录，然后将第2个目录添加到工作区

安装：yarn global add node-dev 
使用：node-dev server.js 8888 //qq-com
     node-dev server.js 9999 //diaoyu-com

2.qq-com
/index.html是首页
/qq.js是JS脚本文件
/friends.json是模拟的好友数据
端口监听为8888，访问http://127.0.0.1:8888

操作步骤
编写path='/index.html’路由,然后新建index.html。server.js会读取index.html。
编写path === '/qq.js’路由,然后新建qq.js。server.js会读取qq.js。
编写path === '/friends.json’路由,然后新建friends.json。server.js会读取friends.json。

知识点：fs文档、fs模块-阮一峰推荐网道
Node.js文件系统封装在fs模块中，它提供了文件的读取、写入、更名、删除、遍历目录、链接等POSIX文件系统操作
fs模块的基本使用：

var fs = require('fs') //引用fs
response.write(fs.readFileSync('./public/index.html'))

3.diaoyu-com
操作步骤同上
/index.html是首页
/diaoyu.js是JS脚本文件
补充：diaoyu-com不需要写路由/friends.json
端口监听为9999，访问http://127.0.0.1:9999

4.让qq.js成功访问自己的json(friends.json)数据
让diaoyu.js不能成功访问qq的json

能不能做到域名也不同?设置本地域名映射,修改hosts
让qq.com映射到127.0.0.1,就可以访问 http://qq.com:8888/index.html 了
让diaoyu.com映射到127.0.0.1,就可以访问 http://diaoyu.com:9999/index.html 了

跨域AJAX

演示跨域被阻止

1.qq-com
首先index.html应用js<script src="qq.js"></script>
然后qq.js发送请求

const request = new XMLHttpRequest()
request.open('GET', './friends.json')
request.onreadystatechange = () => {
   
    if (request.readyState === 4 && request.status === 200) {
   
        console.log(request.response)
    }
}
request.send()

2.diaoyu-com
操作同上
首先index.html应用js<script src="./diaoyu.js"></script>
然后qq.js发送请求

const request = new XMLHttpRequest()
request.open(<