一文搞懂跨域的所有问题

前言: 目前很多应用开发都是多客户端的，前端调用后端提供的 API 来获取数据，很多都是前后端分离的架构，但这样相比之前的单应用系统会带来跨域的问题。

一、 什么是跨域?

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域.    跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器JavaScript实施的安全限制。 这里说明一下，无法跨域是浏览器对于用户安全的考虑，如果自己写个没有同源策略的浏览器，完全不用考虑跨域问题了。是浏览器的锅。 同源策略限制了一下行为： Cookie、LocalStorage 和 IndexDB 无法读取 DOM 和 JS 对象无法获取 Ajax请求发送不出去

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

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

三、 如何解决跨域问题?

  1、jsonp 

JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。

核心思想：网页通过添加一个<script>元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。

2、CORS（Cross-Origin Resource Sharing）,跨域资源共享

 当使用XMLHttpRequest发送请求时，如果浏览器发现违反了同源策略就会自动加上一个请求头 origin；      后端在接受到请求后确定响应后会在 Response Headers 中加入一个属性 Access-Control-Allow-Origin；        浏览器判断响应中的 Access-Control-Allow-Origin 值是否和当前的地址相同，匹配成功后才继续响应处理，否则报错

缺点：忽略 cookie，浏览器版本有一定要求

3、通过配置vue-cli请求代理解决开发环境下的跨域问题

1. vue-cli集成了跨域代理功能------ 只能用在开发阶段。

2. vue.config.js文件中，在devServer下按指定格式配置了proxy，再重启项目即可。

特别强调：

ajax的基地址baseUrl必须是相对地址，而不能是绝对地址

4、基于 Html5 websocket 协议

websocket 是 Html5 一种新的协议，基于该协议可以做到浏览器与服务器全双工通信，允许跨域请求

缺点：浏览器一定版本要求，服务器需要支持 websocket 协议

5、代理跨域请求(Nginx)

前端向发送请求，经过代理，请求需要的服务器资源

缺点：需要额外的代理服务器

6、Html5 postMessage 方法

允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本、多窗口、跨域消息传递

缺点：浏览器版本要求，部分浏览器要配置放开跨域限制

四、 解决跨域问题的最佳方案?

将前端项目部署到和接口相同的服务器