第四天学习后端——什么是跨域?

为什么会出现跨域?

浏览器为了用户的信息安全，网页中有一个为了请求技术：AJAX在网络请求时，请求的网址和当前页面的网址不是同一台服务器，就会被拒绝服务器发送的数据。 限制条件：非同源、AJAX

什么是跨域:

当一个请求url的协议、域名、端口三者之间任意一个与页面url不同，都为跨域。

什么是同源策略：

同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port).

例如：

当前页面的url	被请求页面url	是否跨域	原因
www.baidu.com	www.baidu.com/index.html	否	协议、域名、端口都相同
www.baidu.com	www.baidu.com	是	协议不同
www.baidu.com	www.juejin.com	是	主域名不同
www.baidu.com	hsji.com	是	子域名不同
www.baidu.com：8080	www.baidu.com：8081	是	端口号不同

为什么a、img、script、link标签不会出现跨域

所谓的跨域是因为浏览器的同源策略而引起的。 script-src，img，link、form-action标签、浏览器的地址栏这些网络请求不受跨域影响。 浏览器中网络请求，只有AJAX才有跨域的限制。

但是，img和link标签只能实现单向通信，即只能从客户端向服务器传递数据，这是因为img获取图片进行加载，link是获取样式表加载，而script返回的是javascript代码执行。

案例：

设计一个按钮，点击后，会去请求百度页面。

点击后，出现这种问题，这就是跨域：

跨域的流程图：

注意：被请求的网址是把数据包返回回来了的，当前页面也是接收了的，只是浏览器收到返回的结果，发现是跨域的，阻止了，并报错。