跨域的产生
大家应该都知道跨域是因为浏览器的同源策略所导致的，所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。浏览器引入同源策略主要是为了防止XSS，CSRF攻击。
CSRF（Cross-site request forgery），跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。
在同源策略影响下，域名A向域名B发送Ajax请求，或操作Cookie、LocalStorage、indexDB等数据,或操作dom，js就会受到限制，但请求css，js等静态资源不受限制
跨域的解决方案
1-jsonp 【前端后端实现】
jsonp: 利用 <script> 标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。
JSONP优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性,不安全可能会遭受XSS攻击。
声明一个回调函数，其函数名(如show)当做参数值，要传递给跨域请求数据的服务器，函数形参为要获取目标数据(服务器返回的data)。
创建一个<script>标签，把那个跨域的API数据接口地址，赋值给script的src,还要在这个地址中向服务器传递该函数名（可以通过问号传参:?callback=show）。
服务器接收到请求后，需要进行特殊的处理：把传递进来的函数名和它需要给你的数据拼接成一个字符串,例如：传递进去的函数名是show，它准备好的数据是show('我不爱你')。
最后服务器把准备的数据通过HTTP协议返回给客户端，客户端再调用执行之前声明的回调函数（show），对返回的数据进行操作。
2-CORS 【后端实现】
CORS：跨域资源共享（CORS）是一种机制；当一个资源访问到另外一个资源(这个资源放在
不同的域名或者不同的协议或者端口)，资源就会发起一个跨域的HTTP请求需要浏览器和服务器同时支持；
- 整个CORS通信，都是浏览器自动完成。浏览器发现了AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉；
- 实现CORS的关键是服务器，只要服务器实现了CORS接口，就可以跨源通信
- 服务器对于不同的请求，处理方式不一样； 有简单请求和非简单请求
3-proxy 【前端实现 只适用于本地development开发环境】
// 配置反向代理
proxy: {
'/api': {// 当地址中有/api的时候会触发代理机制
target: 'http://192.168.91.150:3000', // 要代理的服务器地址 这里不用写 api
changeOrigin: true // 是否跨域
pathRewrite: { '^/api': '/api' }// 重写路径
}
}
复制代码4-nginx 【后端实现】
反向代理（Reverse Proxy）方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。简单来说就是真实的服务器不能直接被外部网络访问，所以需要一台代理服务器，而代理服务器能被外部网络访问的同时又跟真实服务器在同一个网络环境，当然也可能是同一台服务器，端口不同而已。
#配置简单实现反向代理的代码
server {
# 监听8080端口
listen 8080;
# 域名是localhost
server name localhost;
client max body size 1024M;
#保存配置文件后启动Nginx，这样当我们访问localhost的时候，就相当于访问localhost:8080了
location / {
proxy_pass http://localhost: 8080;
proxy set header Host $host:$server_port;
}
#凡是访问localhost:8080/api开头的，都转发到真正的服务端地址http://www.nb.com:8080
# location ^~ /api {proxy_pass http://www.nb.com:8080;}
}
复制代码