一.跨域是什么

同域,不是跨域

const url = "./index.html";

不同域,跨域,被浏览器阻止

const url = "http://www.imooc.com";

跨域之后的报错

Access to XMLHttpRequest at 'http://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.

向一个域发送请求,如果要请求的域和当前域是不同域,就叫跨域

不同域之间的请求,就是跨域请求

二.什么是不同域,什么是同域

https(协议)://www.baidu.com(域名):443(端口号)/course/list(路径)

协议、域名、端口号,任何一个不一样,就是不同域

与路径无关,路径不一样无所谓 不同域 第一组

https://www.imooc.com:443/course/list
http://www.imooc.com:80/course/list

第二组

http://www.imooc.com:80/course/list
http://m.imooc.com:80/course/list
http://imooc.com:80/course/list

同域

http://www.imooc.com:80/course/list
http://www.imooc.com:80

三.跨域请求为什么会被阻止

阻止跨域请求,其实是浏览器本身的一种安全策略---同源策略

其他客户端或者服务器都不存在跨域被阻止的问题

四.跨域解决方案

①cors 跨域资源共享

②JSONP

优先使用CORS跨域资源共享 ,如果浏览器不支持CORS的话,在使用JSONP

五.cors

1.cors是什么

表名允许所有域名来跨域请求它, * 是通配符,没有任何限制 只允许指定域名的跨域请求

Access-Control-Allow-Origin: *

Access-Control-Allow-Origin: http://127.0.0.1:5500

2.使用cors跨域的过程

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

3.CORS的兼容性

ie10及以上的版本的浏览器可以正常使用cors

六.JSONP

1.JSONP的原理

script标签跨域不会被浏览器阻止

JSONP主要是利用script标签,加载跨域文件

2.使用JSONP实现跨域

服务器端准备好JSONP接口

https://www.imooc.com/api/http/jsonp?callback=handleResponse

手动加载JSONP接口或动态加载JSONP接口

声明函数

const handleResponse  = (data) => {
  console.log(data);
};
const script = document.createElement("script");
script.src =
  "https://www.imooc.com/api/http/jsonp?callback=handleResponse";
document.body.appendChild(script);

或者直接写在src里

<script src="https://www.imooc.com/api/http/jsonp?callback=handleResponse"></script>

获取的数据

handleResponse({
  code: 200,
  data: [
    { word: "jsp" },
    { word: "js" },
    { word: "json" },
    { word: "js 入门" },
    { word: "jstl" },
  ],
});