跨域问题

是什么:跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。
所谓同源是指，域名，协议，端口均相同

http://www.123.com/index.html 调用 http://www.123.com/server （非跨域）

http://www.123.com/index.html 调用 http://www.456.com/server （主域名不同:123/456，跨域）

http://abc.123.com/index.html 调用 http://def.123.com/server （子域名不同:abc/def，跨域）

http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server （端口不同:8080/8081，跨域）

http://www.123.com/index.html 调用 https://www.123.com/server （协议不同:http/https，跨域）

跨域会报错:

为什么产生:
由浏览器的同源策略造成的，是浏览器施加的安全限制。

怎么解决:

1、JSONP：

使用方式就不赘述了，但是要注意JSONP只支持GET请求，不支持POST请求。

         $.ajax({
              type:"get",
              async:false,
              url:"http://localhost:8080/JavaWeb01/getPassWordByUserNameServlet?userName=Tom",
             dataType:"jsonp",//数据类型为jsonp
              jsonp:"backFunction",//服务端用于接收callBack调用的function名的参数
              success:function (data) {
                 alert(data["passWord"]);
             },
            error:function () {
                alert("error");
             }
 
         });

下面讲讲这种方式的原理。

1、在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，即一般的ajax是不能进行跨域请求的。但 img、iframe 、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用 script标签的开放策略，我们可以实现跨域请求数据，当然这需要服务器端的配合。 Jquery中ajax 的核心是通过 XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加 <script>标签来调用服务器提供的 js脚本。

　　2、当我们正常地请求一个JSON数据的时候，服务端返回的是一串 JSON类型的数据，而我们使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的 JavaScript代码。因为jsonp 跨域的原理就是用的动态加载 script的src ，所以我们只能把参数通过 url的方式传递,所以jsonp的 type类型只能是get ！

2.通过后台中转(httpclient)

例如www.123.com/index.html需要调用www.456.com/server，可以写一个接口www.123.com/server，由这个接口在后端去调用www.456.com/server并拿到返回值，然后再返回给index.html，这就是一个代理的模式。相当于绕过了浏览器端，自然就不存在跨域问题。

3.nginx 转发

利用nginx反向代理，将请求分发到部署到相应项目的tomcat服务器，当然也不存在跨域问题。

具体解决方案可以看:http://blog.csdn.net/l1028386804/article/details/79488328

4.

我们只需要在项目中的web.xml中配置如下代码即可。因为这个过滤器是tomcat提供的，所以我们并不需要导入任何jar包。

<!--配置允许跨域访问-->
<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>