今天完成的事情：今天完成小课堂，对前端跨域有了较深的理解,把萝卜多任务的登录组件写好了

明天计划的事情：把路由守卫设置后，父子路由配置好

遇到的问题：设置路由守卫，如何设置登录之后才能访问进其他页面。

收获：

这里使用的NG-ZORRO的form表单登录组件，接下来就需要设置重新的配置路由。

今天讲了小课堂关于前端跨域的问题。

1.跨域指的是一个网址去另一个网址发起请求，或执行其他网页脚本，这两个网页不是同源的，就是跨域

2.同源策略：同源策略指的就是限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。

3.同源指的是协议、端口、主域名、子域名都必须相同，有任何一个不同就不是同源

4.同源策略限制的内容：

   Cookie、LocalStorage 和 IndexDB 无法读取

   DOM 和 JS 对象无法获取

   Ajax 请求被拦截

5.

解决前端跨域的办法有：

配置Nginx反向代理服务器，使用物理的方法在Nginx的配置文件里面添加需要的地址，这样这个服务器上所有url都是相同的域名、协议和端口。因此，对于浏览器来说，这些url都是同源的，没有跨域限制。

6. 

JSONP的网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器请求后将数据放在一个指定名字的回调函数里传回来。

<script type="text/javascript">

$('#ipt').blur(function () {

// 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）百度搜索接口

var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=search&wd=" + $('#ipt').val();

// 创建script标签，设置其属性

var script = document.createElement('script');

script.setAttribute('src', url);

// // 把script标签加入head，此时调用开始

document.getElementsByTagName('head')[0].appendChild(script);

})

// 定义回调函数

function search(data) {

console.log(data);

for(var i =0;i<data.s.length;i++){

$('#ul').append(` <li>${data.s[i]}</li>`)

}

};

</script>

7.

Websocket 是 HTML5 的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。WebSocket 和 HTTP 都是应用层协议，都基于 TCP 协议 使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。

8.

CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与同源的 AJAX 通信没有差别，代码完全一样。浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信。

9.

其他的方法

html5的postMessage：一个html5所提供的一个API，ie8以前不支持

使用window.name来进行跨域

location.hash + iframe 解决跨域