初识跨域、跨域资源共享

初识跨域

1、初识跨域

同域，不是跨域

cons url = ' ./index.html '；

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

const url = ' https：//www.imooc.com '；

cons xhr = new XMLHttpRequest()；

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

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

2、什么是不同域

https（协议）：//www.imooc.com（域名）：443（端口号）/course/list（路径）

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

与路径无关，路径一不一样无所谓

不同域

https：//www.imooc.com：443/course/list

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

同域

http：//imooc.com：80

http：//imooc.com：80/course/list

3、跨域请求为什么会被阻止

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

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

4、跨域解决方案

CORS 跨域资源共享

JSONP script

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

跨域资源共享

1、CORS是什么

const url = ' https：//www.imooc.com/api/http/search/suggest？words=js '；

const xhr = new XMLHttpRequest()；

Access-Control-Allow-Origin:*

表明运行所有的域名来跨域请求它，*是通配符，没有任何限制

只允许指定域名的跨域请求

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

2、使用CORS跨域的过程

浏览器发送跨域请求

后端在响应头中添加Access-Control-Allow-Origin头信息

浏览器接收到响应

如果是同域下的请求，浏览器不会额外做什么，这次前后端通信就圆满完成了

如果是跨域请求，浏览器会响应头中查找是否允许跨域访问

如果允许跨域，通信圆满成功

如果没有找到或者不包含想要跨域的域名，就丢弃响应结果

3、CORS的兼容性

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