前端跨域问题原因及解决方案

跨域是如何形成的？

当我们请求一个url的 协议、域名、端口三者之间任意一个与当前页面url的协议、域名、端口 不同这种现象我们把它称之为跨域

跨域会导致：
1、无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
2、无法接触非同源网页的 DOM
3、无法向非同源地址发送 AJAX 请求（可以发送，但浏览器会拒绝接受响应）

导致跨域的根本原因是请求浏览器的同源策略导致的 ，而跨域请求报错的原因是： 浏览器同源策略 && 请求是ajax类型 && 请求确实跨域了。

解决方法： jsonp，cors，代理转发

1.jsonp

jsonp 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。
原理：在浏览器上 <script>、<img>、<link>、<iframe>等标签都可以加载跨域资源 且不受同源限制，可以用来作为请求，后端接受请求后返回一个回调函数callback，调用前端已经定义好的函数，从而实现跨域请求.

举个很简单的例子 ： 我们通过img标签的src属性， 请求一个网络地址的图片 ，这就是非同源请求了 ，但是由于浏览器的同源策略只对ajax请求有效所以 我们的请求不会受到影响 。换句话来说 只有ajax请求才会产生跨域问题。

举个例子