1、跨域是什么
// 我们在html接口请求中，有时候会报下面的错误
Access to XMLHttpRequest at 'https://www.imooc.com' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
域指的是域名，向一个域发送请求，如果请求的域和当前域是不同域，就叫跨域；不同域之间的请求就叫跨域请求
2、什么是不同域，什么是同域
https://www.imooc.com:443/course/list
在上面的url地址中：
https：协议
www.imooc.com：域名
443：端口号
/course/list：路径
协议、域名、端口号，任何一个不一样，就是不同域
反之，则是同域，与路径无关，路径不一样无所谓
3、跨域请求为什么会被阻止
阻止跨域请求，其实是浏览器本身的一种安全策略：
同源策略；
所谓同源策略，是指出于安全考略，浏览器只允许同域下的url地址访问同域下的url地址
跨域是浏览器本身的锅，其它客户端或者服务器都不存在跨域被阻止的问题
4、跨域解决方案
跨域问题前端无法解决，只能靠后端人员解决。当出现跨域问题时，前端人员唯一能做的就是告诉后端人员我要跨域，剩下的工作交给后端去完成（在响应头中添加字段：Access-Control-Allow-Origin:*）
（1）CORS跨域资源共享
// 在 响应头 Response Headers 中添加
// 表明允许所有的域名来跨域请求它，*是通配符，没有任何限制
Access-Control-Allow-Origin: *
// 只允许指定域名的跨域请求
Access-Control-Allow-Origin: http://192.168.0.100:5500
使用 CORS 跨域的过程
① 浏览器发送请求
② 后端在响应头中添加Access-Control-Allow-Origin头信息
③ 浏览器接收到响应
④ 如果是同域下请求，浏览器不会额外做什么，这次前后端通信就圆满完成了
⑤ 如果是跨域请求，浏览器会从响应头中查找是否允许跨域访问
⑥ 如果允许跨域，通信圆满完成
⑦ 如果没找到或不包含想要跨域的域名，就丢弃响应结果
CORS兼容性：IE10 及以上版本的浏览器可以正常使用 CORS
关于浏览器兼容性推荐网址：https://caniuse.com
（2）JSONP
原理：
scrip标签跨域不会被浏览器阻止
JSONP主要就是利用scrip标签，加载跨域文件
// 声明函数
<script>
const handleResponse = data => {
console.log(data)
};
</script>
// 方式一：手动加载JSONP接口
<script src="https://www.imooc.com/api/http/jsonp?callback=handleResponse"></script>
// 方式二：动态加载JSONP接口
const script = document.createElement('script');
script.src = 'https://www.imooc.com/api/http/jsonp?callback=handleResponse';
document.body.appendChild(script);
