一、为什么会出现跨域问题
浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。
在前后端分离的模式下，前后端的域名是不一致的，此时就会发生跨域访问问题。在请求的过程中我们要想回去数据一般都是post/get请求，所以..跨域问题出现。 出于浏览器的同源策略限制。
同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。
可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。
所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）
二、什么是跨域
当一个请求 url 的协议、域名、端口三者之间任意一个与当前页面 url 不同即为跨域 当前页面url 被请求页面url 是否跨域 原因
http://www.test.com/ http://www.test.com/index.html 否 同源（协议、域名、端口号相同）
http://www.test.com/ https://www.test.com/index.html 跨域 协议不同（http/https）
http://www.test.com/ 百度一下，你就知道 跨域 主域名不同（test/baidu）
http://www.test.com/ http://blog.test.com/ 跨域 子域名不同（www/blog）
http://www.test.com:8080/ http://www.test.com:7001/ 跨域 端口号不同（8080/7001）
三、解决
方式一：使用 ajax 的 jsonp
使用该方式的缺点：请求方式只能是 get 请求
![]()
服务器代码
![]()
方式二：使用 jQuery 的 jsonp 插件
特点： get 请求、 post 请求；
但从服务器从获取的数据，依然是 jsonp 格式。 插件下载网址：https://github.com/jaubourg/jquery-jsonp
前端代码
![]()
服务器代码
![]()
方式三：使用 cors
前端代码
![]()
服务器代码
![]()
使用该方式的特点：与前两种方式相比，前端代码和未处理跨域前一样，即普通的 ajax 请求，但服务器代码添加了一段解决跨域的代码。
// 设置：Access-Control-Allow-Origin头，处理Session问题
response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("P3P", "CP=CAO PSA OUR");
if (request.getHeader("Access-Control-Request-Method") != null && "OPTIONS".equals(request.getMethod())) {
response.addHeader("Access-Control-Allow-Methods", "POST,GET,TRACE,OPTIONS");
response.addHeader("Access-Control-Allow-Headers", "Content-Type,Origin,Accept");
response.addHeader("Access-Control-Max-Age", "120");
}cors高级使用：在 springmvc 中配置拦截器 ，创建跨域拦截器实现 HandlerInterceptor 接口，并实现其方法，在请求处理前设置头信息，并放行。
![]()
在springmvc的配置文件中配置拦截器，注意拦截的是所有的文件
![]() |
|
转播
