浅谈跨域的几种解决方案JSONP，CORS，服务器代理。

一、在说到解决跨域之前，需要先了解一下什么是跨域？为什么会产生跨域？跨域发生在前端还是后端？

1.什么是跨域？为什么会产生跨域？
在浏览器中，为了保护用户的数据的私密性，所以出现了一种限制规则，叫做“同源策略”，这个策略的诞生就是浏览器对协议不同，域名不同，端口号不同的两个服务器各自的数据进行的一种保护，如果没有这个同源策略，可以想象一下，假如用户在在淘宝浏览商品，而用户可以操作京东里面的数据，或者说，用户可以随随便便请求其它服务器以及数据库，这样的话，是非常不好的，所以说，浏览器为了防止类似这种情况的出现，出台了“同源策略”，而这个策略很好的保护了服务器及数据库中的数据。所以说，跨域就是协议不同，域名不同，端口号不同下的web网页访问服务器。
2.跨域发生在前端还是后端？
在上一条中了解了跨域的产生以及跨域的条件，所以我们了解到，只有在浏览器中会产生跨域，即跨域是发生在前端的。后端不存在跨域。

二、解决跨域的三种方式，JSONP、CORS、服务器代理。

##一、JSONP。
在了解JSONP之前，前端应该不难发现，在web网页中调用JS文件是不受是否跨域的影响。而且应该也发现了，凡是带src属性的标签 img script iframe这三个标签都不受是否跨域的影响，所以，前端可以使用可以处理JSON数据格式的script标签来解决跨域，而JSONP的核心理念就是目标页面回调本地页面的方法,并带入参数。
代码示例

//本地代码
  <script type="text/javascript">
    var LocalFunction= function(data){
        console.log('这是一个本地方法，需要被请求的文件来调用' + '被请求的文件给本地方法传回来的数据是:' +data.result);
    };
    </script>
//给接口发请求
     <script type="text/javascript" src="http://localhost:3000/api/test.js"></script>

服务端test.js文件代码

LocalFunction({"result":"存放在服务器中的文件被请求了"});

运行之后就可以在控制台看见接口请求成功。控制台会打印

'这是一个本地方法，需要被请求的文件来调用被请求的文件给本地方法传回来的数据是:存放在服务器中的文件被请求了'

所以说，前端可以利用回调＋script标签的src属性来跳过浏览器的同源策略限制，请求接口，而这种方式，也称之为JSONP。
注意：JSONP方法适用于GET请求。

##二、CORS方法
CORS全称是"跨域资源共享"（Cross-origin resource sharing）。
CORS方法是解决跨域最简单粗暴的一种方法，只要服务器实现了CORS接口，就可以跨源通信。在我们项目开发中，后端（node搭建的express服务器）可以在接口响应中加入下面代码，则前端就可以访问后端接口了，但是这种方式是需要后端给前端开放权限才可以。
因此，实现CORS通信的关键是服务器。

res.append('Access-Control-Allow-Origin','*')

##三、服务器代理方法

在项目开发阶段，如果后端已经完成了所有接口，并且给了前端接口文档后就回家结婚去了，但是前端发现后端并没有开放权限，而后端 一时半会儿也回不来，这时候项目还不能停下的时候，就需要服务器代理这种方法去解决跨域问题了。
我们知道，跨域是存在于前端，后端并不存在跨域，所以根据这个特性，前端可以自己搭建一个简易服务器(下称第三方服务器)，这个服务器的权限在前端手上，这时候，前端通过第三方服务器去请求存放数据的服务器，（因为后端不存在跨域），而存放数据的服务器响应第三方服务器的请求并且将数据库查询结果的数据返回给第三方服务器，第三方服务器拿到数据后继续响应前端，这种方法，称为服务器代理。
以上就是解决跨域的三种方法，推荐使用CORS方法，服务器代理方法可以在后端小伙伴回来之后可以协商解决转成CORS方法，毕竟术业有专攻嘛