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 = '';const url = '/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
/
JSONP
原理：利用 script 标签加载跨域文件；script 标签跨域不会被浏览器阻止
过程
1.准备好 JSONP 接口
/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 ='/api/http/jsonp?callback=handleResponse';document.body.appendChild(script);<script src="/api/http/jsonp?callback=handleResponse"></script>
相当于
<script>handleResponse({code: 200,data: [{word: 'jsp'},{word: 'js'},{word: 'json'},{word: 'js 入门'},{word: 'jstl'}]});</script>
