浅谈前端跨域问题

        网上很多解决跨域的问题，让我们不知道到底哪个才是我们最常用的，对于我们前端而言，其实很简单，会其中的一种两种足够了，因为更多解决跨域都是后台去完成的。

什么是跨域？

简单来说：就是从一个网页去请求另一个网页的资源，只要协议、域名、端口其中一个不同，就被当作是跨域。

怎么解决呢？

1.跨域资源共享（CORS）:在请求头中，增加一个Origin字段，用来说明本次请求来自哪个源（协议+域名+端口），服务器根据这个值，决定是否同意这次请求。

2.通过JSONP跨域：jsonp的原理是利用<script>标签没有跨域限制，通过<script>标签的src属性，发送带有callback参数的get请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。
过程：a.网页端插入一个script标签，src指向目标url（url后面加上query，?callback=函数名） b.
后端处理函数接收到请求，得到函数名，比如handle（handle函数定义在前端）c.后端用handle包装数据，返回给浏览器（返回的content-type必须是text/javascript;charset=utf-8）d.网页端script内容加载完成得到handle(data) e.浏览器发现内容是js(查看content-type)，则调用js解释器执行handle(data)
优点：a.它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制
            b.它的兼容性更好，在更加古老的浏览器中都可以运行                                                                              c.不需要XMLHttpRequest或ActiveX的支持，并且在请求完毕后可以通过调用callback的方式回传结果
 缺点：                                                                                                                                                                         a.它只支持GET请求而不支持POST等其它类型的HTTP请求                                                                     b.它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行数据通信的问题(JavaScript调用)
         c.安全性低，容易遭受XSS攻击，因为我们拿到的是对方接口的数据作为js执行，如果得到的是一个很危险的js，获取了用户信息和cookies，这时执行了js就会出现安全问题，因此使用jsonp跨域就必须保证jsonp服务是安全可信的
         d.在失败的时候不会返回各种HTTP状态码

 3.中间件跨域:直接在package.json文件中配置proxy

总结：

上面三种是比较常见的方法，通过CORS在请求头中添加Origin字段，这是后台做的；jsonp的方式现在基本不用了，所以了解就行，当然你需要详细了解，上面我也写的很清楚，好好理解下；通过代理的方式是我们使用最多。接下来说下具体的操作方式：

在前端项目中，找到package.json文件中配置proxy

配置好代理，跨域就跨域解决了。为啥通过代理可以解决呢，我画个图解释下：

 

前端项目，你要从别人服务器拿数据，你直接拿肯定是拿不到的，但是你可以在本地服务器拿数据，这个时候你就可以让本地服务器成为你的代理，让本地服务器去别人的服务器拿数据（服务器与服务器直接是不存在跨域的），拿到之后再返回到你的前端项目中 ，这样你就拿到了别人服务器上的数据，这就是代理解决了跨域的问题。

如果你喜欢我的分享，就加个关注吧，😄