跨域Cross-Origin Resource Sharing

URL

定义

在WWW上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫URL（Uniform Resource Locator,统一资源定位符），它是WWW的统一资源定位标志，就是指网络地址

组成部分

资源类型、存放资源的主机域名、资源文件名

格式

protocol :// hostname[:port] / path / [;parameters][?query]#fragment
其中，[ ]为可选项
格式说明：

protocol(协议)

指定使用的传输协议，下面也列出了几种protocol属性的有效方案名称。那我们最常用的就是HTTP协议，它也是目前www中应用最广泛的协议。
file 资源是本地计算机上的文件。格式file:///，注意后边应是三个斜杠。
ftp 通过 FTP访问资源。格式 FTP://
gopher 通过 Gopher 协议访问该资源。
http 通过 HTTP 访问该资源。 格式 HTTP://
https 通过安全的 HTTPS 访问该资源。 格式 HTTPS://
mailto 资源为电子邮件地址，通过 SMTP 访问。 格式 mailto:

hostname(主机名)

是指存放资源的服务器的域名系统(DNS) 主机名或 IP 地址。有时，在主机名前也可以包含连接到服务器所需的用户名和密码（格式：username:password@hostname）。

port(端口号)

整数，可选，省略时使用方案的默认端口，各种传输协议都有默认的端口号，如http的默认端口为80。如果输入时省略，则使用默认端口号。有时候出于安全或其他考虑，可以在服务器上对端口进行重定义，即采用非标准端口号，此时，URL中就不能省略端口号这一项。

path（路径）

由零或多个“/”符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
parameters（参数）
这是用于指定特殊参数的可选项。

parameters（参数）

这是用于指定特殊参数的可选项。

query(查询)

可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP。NET等技术制作的网页）传递参数，可有多个参数，用“&”符号隔开，每个参数的名和值用“=”符号隔开。

fragment（信息片断）

字符串，用于指定网络资源中的片断。例如一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释

何为跨域

由协议、域名、端口号决定,与路径是否一致无关

为何需要跨域

同源策略阻止了跨域请求
是浏览器本身 的一种安全策略，其他客户端或者服务器都不存在跨域被阻止的问题

如何跨域

后端（服务器端）负责，优先使用 CORS
若浏览器不支持 CORS再使用 JSONP

CORS

const url = 'https://www.imooc.com';
const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState != 4) return;
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
	console.log(xhr.responseText);
}
};
xhr.open('GET', url, true);
xhr.send(null);
//Access-Control-Allow-Origin: *

表明允许所有的域名来跨域请求它，* 是通配符，没有任何限制
只允许指定域名的跨域请求
Access-Control-Allow-Origin: http://127.0.0.1:5500

过程

① 浏览器发送请求
② 后端在响应头中添加 Access-Control-Allow-Origin 头信息
③ 浏览器接收到响应
④ 如果是同域下的请求，浏览器不会额外做什么，这次前后端通信就圆满完成了
⑤ 如果是跨域请求，浏览器会从响应头中查找是否允许跨域访问
⑥ 如果允许跨域，通信圆满完成
⑦ 如果没找到或不包含想要跨域的域名，就丢弃响应结果
兼容性
IE10 及以上版本的浏览器可以正常使用 CORS
https://caniuse.com/

JSONP

原理：利用 script 标签加载跨域文件；script 标签跨域不会被浏览器阻止

过程

1.准备好 JSONP 接口

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

2.手动加载 JSONP 接口

// 声明函数
const handleResponse = data => {
console.log(data);
};
//调用函数
handleResponse({
code: 200,
data: [
{
word: 'jsp'
},
{
word: 'js'
},
{
word: 'json'
},
{
word: 'js 入门'
},
{
word: 'jstl'
}
]
});

3.动态加载 JSONP 接口

const script = document.createElement('script');
script.src =
'https://www.imooc.com/api/http/jsonp?callback=handleResponse';
document.body.appendChild(script);
<script src="https://www.imooc.com/api/http/jsonp?callback=handleResponse"></script>

相当于

<script>
handleResponse({
code: 200,
data: [
{
word: 'jsp'
},
{
word: 'js'
},
{
word: 'json'
},
{
word: 'js 入门'
},
{
word: 'jstl'
}
]
});
</script>