一、为什么会出现跨域问题

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

二、什么是跨域

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

三、非同源限制

1、无法读取非同源网页的Cookie、LocalStroge和indexedDB
2、无法接触非同源网页的DOM
3、无法向非同源地址发送AJAX请求

四、平时实现跨域的解决方法

1、JSONP：
利用标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的JSON数据。JSONP请求一定需要对方的服务器做支持才可以使用。
①原生实现：
②Vue.js实现：

优缺点：
JSONP优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性，不安全可能会遭受XSS攻击。

2、CORS（跨域资源共享）：
CORS是一种机制，当一个资源访问到另一个资源（这个资源放在不同的域名或者不同协议或者端口），资源就会发起一个跨域的HTTP请求需要浏览器和服务器共同支持
①原生AJAX实现：
②Vue.js实现（vue-resource)：

③axios实现

3、WebSocket:
WebSocket是HTML5的一个持久化的协议，它实现了浏览器和服务器的全双工通信，同时也是跨域的一种解决方案。WebSocket和HTTP都是应用层协议，都是基于TCP协议。但是WebSocket是一种双向通信协议，在建立连接之后，WebSocket的服务器和客户端都能主动向对方发送或接收数据。同时，WebSocket在建立连接时需要借助HTTP协议，连接建立好了之后client与server之间的双向通信就与HTTP无关了。