跨域：基本概念、怎么判断是否同域以及跨域的解决方案

跨域

1、基本概念

• 向一个域发送请求，如果要请求的域和当前域是不同域，就叫跨域
• 不同域之间的请求，就是跨域请求，跨域请求一般会被浏览器阻止掉
• 阻止跨域请求，是浏览器本身的一种安全策略（同源策略：只能请求同域下的url地址）
• 其他客户端或者服务器都不存在跨域被阻止的问题

2、怎么判断是否同域

以 https://www.imooc.com :443 /course/list 为例：

• https：协议
• www.imooc.com ：域名
• 443 ：端口号
• course/list ：路径
• 只要 协议、域名、端口号，任何一个不同,就是不同域；是否同域与路径无关

3、跨域解决方案

（1）方案一：CORS跨域资源共享

• 使用CORS跨域的过程：

①浏览器发送跨域请求
②后端在响应头中添加Access-Control-Allow-Origin头信息

Access-Control- Allow-Origin: *
表明允许所有的域名来跨域请求它, *是通配符,没有任何限制

只允许指定域名的跨域请求
Access-Control-Allow-Origin: http://127.0.0.1:5500

③浏览器接收到响应
④如果是同域下的请求，浏览器不会额外做什么，这次前后端通信就圆满完成了
⑤如果是跨域请求，浏览器会从响应头中查找是否允许跨域访问
⑥如果允许跨域，通信圆满完成
⑦如果没找到或不包含想要跨域的域名，就丢弃响应结果

• CORS的兼容性
  IE10及以上版本的浏览器可以正常使用CORS

（2）方案二：JSONP

• JSONP原理：
  script标签跨域不会被浏览器阻止，而JSONP主要就是利用script 标签,加载跨域文件
• 使用JSONP跨域的过程：

①服务器端准备好JSONP接口
②手动加载JSONP接口或动态加载JSONP接口

4、其他

• 优先使用CORS解决跨域问题.
• 不能使用CORS的时候,可以考虑使用JSONP解决跨域问题