跨域 - 简书

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);

跨域