今天尝试使用MD编辑器来记录笔记，希望可以更加清晰
昨天在axios那里有点模糊所以又重新学了一下，从这里开始记录

1.axios

Axios是专注于网络数据请求的库

相比于原生的XMLHttpRequest对象，axios简单易用

相比于jQuery，axios更加轻量化,只专注于网络数据请求

1.1 axios发起GET请求

axios发起get请求语法：

axios.get('url',{params:{/*参数*/} }).then(callback)

具体的请求示例：

// 请求的URL地址var url = 'http://www. liulongbin. top: 3006/api/get '// 请求的参数对象var paramsObj = { name: 'zs',age: 20 }// 调用axios.get() 发起GET请求axios.get(ur1, { params: paramsObj }).then (function(res) {// res.data 是服务器返回的数据var result = res.dataconsole. log (res)})

1.2 axios发起POST请求

语法:

axios.post('url', {params:{/*参数*/}}).then (callback)

1.3 直接使用axios发起请求

axios也提供了类似于jQuery中$.ajax()的函数，语法如下:

axios({method: '请求类型',url: '请求的URL地址',data: {/*POST数据*/},params: {/*GET数据*/}
}).then(ballback)

2.同源策略

2.1什么是同源.

如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。

例如，下表给出了相对于http://www.test.com/index.html 页面的同源检测:

2.2 什么是同源策略

1.同源策略

(英文全称Same origin policy)是浏览器提供的一个安全功能。

2.MDN官方给定的概念:

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

3.通俗的理解:

浏览器规定，A网站的JavaScript，不允许和非同源的网站C之间，进行资源的交互，例如:

①无法读取非同源网页的Cookie、LocalStorage 和IndexedDB

②无法接触非同源网页的DOM

③无法向非同源地址发送Ajax请求

3.跨域

3.1什么是跨域

1.同源指的是两个URL的协议、域名、端口一致，

反之，有一项不相同，则是跨域。

2.出现跨域的根本原因:

浏览器的同源策略不允许非同源的URL之间进行资源的交互。

网页: http://www.test.com/index.html

接口: http://www.api.com/userlist

正常情况下，不能相互访问

3.2.浏览器对跨域请求的拦截

注意:

浏览器允许发起跨域请求，但是，跨域请求回来的数据，会被浏览器拦截,无法被页面获取到!

3.3 如何实现跨域数据请求

现如今，实现跨域数据请求，最主要的两种解决方案，分别是JSONP和CORS。

1.JSONP:

出现的早，兼容性好(兼容低版本IE) 。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持GET求，不支持POST请求。

2.CORS:

出现的较晚，它是W3C标准，属于跨域Ajax请求的根本解决方案。支持GET和POST请求。缺点是不兼容某些低版本的浏览器。

4.JSONP

JSONP（JSON with padding）是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问问题

4.1 JSONP的实现原理

由于浏览器同源策略的限制，网页中无法通过Ajax请求非同源的接口数据。但是

因此，JSONP的实现原理，就是通过

4.2 实现一个简单的JSONP

定义一个success回调函数:

通过