跨域问题产生的原因，是由于浏览器的安全机制，JS只能访问与所在页面同一个域（相同协议、域名、端口）的内容（参考js的同源策略）。

但是我们项目开发过程中，经常会遇到在一个页面的JS代码中，需要通过AJAX去访问另一个服务器并返回数据，这时候就会受到浏览器跨域的安全限制了。

这里要注意，如果只是通过AJAX向另一个服务器发送请求而不要求数据返回，是不受跨域限制的。浏览器只是限制不能访问另一个域的数据，即不能访问返回的数据，并不限制发送请求。

2、跨域解决方案

jsonp

Web页面上调用js文件时不受是否跨域的影响，凡是拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>。那就是说如果要跨域访问数据，就服务端只能把数据放在js格式的文件里。恰巧我们知道JSON可以简洁的描述复杂数据，而且JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据。然后客户端就可以通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件。客户端在对JSON文件调用成功之后，也就获得了自己所需的数据。这就形成了JSONP的基本概念。允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

三步走：创建script、指定src,插入到文档。

jQuery支持JSONP的调用。在另外的一个域名中指定好回调函数名称，就可以用下面的形式来就加载JSON数据。

jQuery.getJSON(url + "&callback=?", function(data) {

alert(data.a + data.b)

})

服务端当然也要提供JSONP的支持，其实只要提供读写callback这个params就可以了。

跨域资源共享（CORS）

Cross-Origin Resource Sharing (CORS) 是W3c工作草案，它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方，从而决定请求或响应成功与否。

CORS与JSONP相比，更为先进、方便和可靠。

1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。

2、 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。

3、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。

对一个简单的请求，没有自定义头部，要么使用GET，要么使用POST，它的主体是text/plain,请求用一个名叫Orgin的额外的头部发送。Origin头部包含请求页面的头部（协议，域名，端口），这样服务器可以很容易的决定它是否应该提供响应。

服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。

Header set Access-Control-Allow-Origin *

为了防止XSS攻击我们的服务器， 我们可以限制域，比如

Access-Control-Allow-Origin: http://blog.csdn.net

很多服务都已经提供了CORS支持，比如 AWS 支持跨域资源分享功能CORS，向S3上传不需要代理。

1、CORS的原理：CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。

2、tomcat如何配置cors的跨域请求： 

在tomcat中，有一个和cors相关的拦截器：CORS Filter

该过滤器可以通过添加必需的访问控制请求头Access-Control-*对象来进行跨域。同时还可以对一些请求进行拦截。如果请求是无效的，或者是不被允许的，该请求被拒绝或者禁止。 

其在web.xml文件中的基本配置如下：

        <filter-name>CorsFilter</filter-name>

        <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>

        <init-param>

            <param-name>cors.allowed.origins</param-name>

            <param-value>

                http://localhost:8080,

                https://localhost:8443

            </param-value>

        </init-param>

        <init-param>

            <param-name>cors.allowed.methods</param-name>

            <param-value>

                GET,POST,HEAD,OPTIONS,PUT

            </param-value>

        </init-param>

        <init-param>

            <param-name>cors.allowed.headers</param-name>

            <param-value>

                Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Access-Control-Allow-Origin

            </param-value>

        </init-param>

        <init-param>

            <param-name>cors.exposed.headers</param-name>

            <param-value>

                Access-Control-Allow-Origin,Access-Control-Allow-Credentials

            </param-value>

        </init-param>

        <init-param>

            <param-name>cors.support.credentials</param-name>

            <param-value>true</param-value>

        </init-param>

        <init-param>

            <param-name>cors.preflight.maxage</param-name>

            <param-value>10</param-value>

        </init-param>

    </filter>

    <filter-mapping>

        <filter-name>CorsFilter</filter-name>

        <url-pattern>/wxrefund/*</url-pattern>

    </filter-mapping>

3、cors.allowed.origins：允许访问资源的源列表。*表示任何来源都可以访问该资源。否则，只有配置的白名单的来源可以访问该资源，其中白名单用逗号隔开，如http://localhost:8080,https://localhost:8443。

4、cors.allowed.methods：允许访问的http请求方法，如GET,POST,HEAD,OPTIONS,PUT等，方法名用逗号隔开。

5、cors.allowed.headers：在实际请求时可使用的请求头列表，用逗号隔开。如Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Access-Control-Allow-Origin。这些头也将返回作为访问控制的一部分。