跨域问题：解决跨域的三种方案

https://www.cnblogs.com/itmacy/p/6958181.html
https://www.cnblogs.com/ysocean/p/9380551.html#_label2_0

如何解决跨域问题？首先我们需要知道什么是跨域，跨域指的是 浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器对JavaScript 施加的安全限制。

1、同源策略

同源策略是由 Netscape 提出的一个安全策略，它是浏览器最核心也是最基本的安全功能，如果缺少同源策略，则浏览器的正常功能可能都会受到影响，现在所有支持JavaScript的浏览器 都会使用这个策略。

所谓同源指的是：
协议、域名、端口号都相同，只要有一个不相同，那么都是非同源。

浏览器在执行脚本的时候，都会检查这个脚本属于哪个页面，即检查是否同源，只有同源的脚本才会被执行；而非同源的脚本在请求数据的时候，浏览器会报一个异常，提示拒绝访问。

①、http://www.123.com/index.html 调用 http://www.123.com/welcome.jsp 协议、域名、端口号都相同，同源。

②、https://www.123.com/index.html 调用 http://www.123.com/welcome.jsp 协议不同，非同源。

③、http://www.123.com:8080/index.html 调用 http://www.123.com:8081/welcome.jsp 端口不同，非同源。

④、http://www.123.com/index.html 调用 http://www.456.com/welcome.jsp 域名不同，非同源。

⑤、http://localhost:8080/index.html 调用 http://127.0.0.1:8080/welcom.jsp 虽然localhost等同于 127.0.0.1 但是也是非同源的。

同源策略限制的情况：

1、Cookie、LocalStorage 和 IndexDB 无法读取

2、DOM 和 Js对象无法获得

3、AJAX 请求不能发送

注意：对于像 img、iframe、script 等标签的 src 属性是特例，它们是可以访问非同源网站的资源的。

2、跨域实例演示

我们创建了两个 web 项目JavaWeb01 和 JavaWeb02 分别部署在tomcat1和Tomcat2上上，这两个 Tomcat 的端口号设置是不一样的，一个是 8080，一个是8081，所以这两个项目构成了非同源。那么我们从客户端（浏览器）输入访问部署在 Tomcat2 上的项目 JavaWeb2，然后在该项目中通过 ajax 去请求部署在 Tomcat1 上的项目数据，能够访问的到呢？

3、3种解决方案

当前端页面与后台运行在不同的服务器时，就必定会出现跨域这一问题，本篇简单介绍解决跨域的三种方案，部分代码截图如下，仅供参考：

方式一：使用ajax的jsonp

jsonp原理：
Jsonp不是新技术，跨域的解决方案。使用js的特性绕过跨域请求。Js可以跨域加载js文件。

前端代码

服务器代码

使用该方式的缺点：请求方式只能是get请求

方式二：使用jQuery的jsonp插件

插件下载网址：https://github.com/jaubourg/jquery-jsonp

前端代码

服务器代码

使用该方式的特点：与方式一相比，请求方式不只局限于get请求，还可以是post请求，但从服务器 获取的数据依然是jsonp格式

方法二的另一种写法：

https://blog.csdn.net/WuCourage/article/details/77802812

• 客户端使用jquery：

• 服务端
  1、接收callback参数，取回调函数的js的方法名。
  2、业务逻辑处理。
  3、响应结果（回调函数名（参数）），拼接一个js语句。

方式三：使用cors

response.setHeader(“Access-Control-Allow-Origin”, "*");

前端代码

服务器代码

使用该方式的特点：与前两种方式相比，前端代码和未处理跨域前一样，即普通的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的配置文件中配置拦截器，注意拦截的是所有的文件