持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情
前言
大家好呀，我是L同学。在上篇文章ajax知识点总结（三）中，我们学习数据交互、josn数据等相关知识点。今天，在这篇文章中，我们将学习如何使用axios发送网络请求、同源与跨域等相关知识点。
axios
Axios 是专注于网络数据请求的库。相比于原生的 XMLHttpRequest 对象，axios 简单易用。相比于 jQuery中的ajax方法，axios 更加轻量化，只专注于网络数据请求。
axios发送get请求
axios.get('url', { params: { /参数/ } }).then(callback)
axios发送post请求
axios.post('url', { /参数/ }).then(callback)
// 调用 axios.post() 发起 POST 请求
axios.post(url, { location: '北京', address: '顺义' }).then(function(res) {
// res.data 是服务器返回的数据
var result = res.data
console.log(result)
})
直接使用axios发起请求
axios 也提供了类似于 jQuery 中 $.ajax() 的函数，语法如下：
axios({
method: '请求类型',
url: '请求的URL地址',
data: { /* POST数据 */ },
params: { /* GET参数 */ }
}) .then(callback)
同源与跨域
同源策略
1995 年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。 同源策略：最初，它的含义是指，A 网页不能往 B 网页发送 ajax 请求，除非这两个网页"同源"。所谓"同源"指的是"三个相同"。
- 协议相同 http https
- 域名相同 www.xxxA.com www.xxxB.cn www.xxxC.com
- 端口相同 80 81 82
如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。
举例来说，www.test.com/index.html 这个网址，协议是http://，域名是www.example.com，端口是80（默认端口可以省略）。
www.test.com/other.html 同源（协议、域名、端口相同） www.test.com/about.html 协议不同（http 与 https） blog.test.com/movie.html 域名不同（www.test.com 与 blog.test.com） www.test.com:7001/home.html 端口不同（默认的 80 端口与 7001 端口） www.test.com:80/main.html 同源（协议、域名、端口相同）
同源策略的目的
同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。
设想这样一种情况：A 网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取 A 网站的 Cookie，会发生什么？
很显然，如果 Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因此同源策略是必须的，如果 cookie 可以在不同源的网站中共享，那么互联网将毫无安全可言。
虽然这些限制是很有必要的，但是也给我们日常开发带来不好的影响。比如实际开发过程中，往往都会把服务器端架设到一台甚至是一个集群的服务器中，把客户端页面放到另外一个单独的服务器。那么这时候就会出现不同源的情况，如果我们知道两个网站都是安全的话，我们是希望两个不同源的网站之间可以相互请求数据的。这就需要使用到跨域 。
跨域
同源指的是两个 URL 的协议、域名、端口一致，反之，则是跨域。出现跨域的根本原因是浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。
