ajax跨域请求接口介绍及解决方案

在前端开发过程中，将常出现前端代码和后台服务不在一个服务器的情况，这时候前端js代码调用后台接口，会出现跨域问题。：

1、这里的域是通过URL的头部来识别的。浏览器并不会去尝试判断相同的ip地址对应着两个域或者两个域是否在同一个ip上。URL的头部指window.location.protocol +window.location.host，也可以理解为“Domains, protocols and ports must match”。

2、因为协议、IP、端口造成的跨域问题，只修改前端代码是没用的。

下面我们主要讲述前端和后台服务器不在同一域名下，引起的跨域问题。如果前端js跨域访问后台接口，浏览器控制台会报错。

 

可用通过两种方式解决：JSONP和CORS。

一、JSONP

JSONP可以实现GET请求的跨域访问。

前端代码：

[javascript]  view plain  copy

 

1. $.ajax({  
2.         type : "get",  
3.         url: "http://localhost:8080/bcse-oa/login?userName=admin&password=123",  
4.         dataType : "jsonp",//数据类型为jsonp    
5.         jsonp: "jsonpCallback",//服务端用于接收callback调用的function名的参数    
6.         success : function(data){  
7.             //回调函数  
8.         },  
9.         error:function(){  
10.         }  
11.     });   

简写形式，效果相同

[javascript]  view plain  copy

 

1. $.getJSON("http://localhost:8080/bcse-oa/login?userName=admin&password=123& jsonpCallback=?",   
2.         function(data){  
3.         //回调函数  
4.     });      

后台Java代码：

[java]  view plain  copy

 

1. PrintWriter out = response.getWriter();  
2. JSONObject resultJSON = JSONObject.fromObject(map); //根据需要拼装json    
3. String jsonpCallback = request.getParameter("jsonpCallback");//客户端请求参数    
4. out.println(jsonpCallback+"("+resultJSON.toString(1,1)+")");//返回jsonp格式数据      
5.    

 

二、CORS

CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。

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

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

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

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

使用CORS，需要区分简单请求和预检机制。

在CORS规范中，GET、HEAD和POST这三个HTTP是“简单HTTP方法”，Accept, Accept-Language, Content-Language和报头Content-Type为multipart/form-data、application/x-www-form-urlencoded、text/plain中一种的称为“简单请求报头”。

简单请求：请求采用简单HTTP方法，自定义请求报头空或者自定义请求报头均为简单请求报头。因为具有这些特性的请求不是以更新（添加、修改和删除）资源为目的，服务端对请求的处理不会导致自身维护资源的改变。如果是简单请求，设置Access-Control-Allow-Origin为请求站点IP或者*即可。

预检机制：浏览器在发送真正的跨域资源请求前，先发送一个预检请求（Preflight Request）。预检请求为一个采用HTTP-OPTIONS方法的请求，这是一个不包含主体的请求，同时用户凭证相关的报头也会被剔除。基于真正资源请求的一些辅助授权的信息会包含在此预检请求的相应报头中。

资源的提供者在接收到预检请求之后，根据其提供的相关报头进行授权检验，确定请求站点是否值得信任，请求采用HTTP方法和自定义报头是否被允许。如果预检请求没有通过授权检验，资源提供者一般会返回一个状态为“400， Bad Reuqest”的响应。如果通过，则会返回一个状态为“200， OK”的响应，授权相关信息会包含在响应报头中。除了上面介绍的“Access-Control-Allow-Origin”报头之外，预检请求的响应还具有如下3个典型的报头。

Access-Control-Allow-Methods：跨域资源请求允许采用的HTTP方法列表。

Access-Control-Allow-Headers：跨域资源请求允许携带的自定义报头列表。

Access-Control-Max-Age：浏览器可以将响应结果进行缓存的时间（单位为秒），这样可以让浏览器避免频繁地发送预检请求。

浏览器在接收到预检响应之后，会根据响应报头确定后续发送的真正跨域资源请求是否会被接受，具体的检验逻辑如下：

通过请求的“Origin”报头表示的源站点必须存在于“Access-Control-Allow-Origin”响应报头标识的站点列表中。

l 响应报头“Access-Control-Allow-Methods”不存在，或者预检请求的“Access-Control-Request-Method”报头表示的请求方法在其列表之内。

l 预检请求的“Access-Control-Request-Headers”报头存储的报头名称均在响应报头“Access-Control-Allow-Headers”表示的报头列表之内。

只有在确定服务端一定会接受的情况下，浏览器才会发送真正跨域资源请求。预检响应结果会被浏览器缓存，在“Access-Control-Max-Age”报头设定的时间内，缓存的结果将被浏览器用户进行授权检验，所以在此期间不会再有预检请求发送。

在W3C的CORS规范来说，服务端利用响应报头“Access-Control-Allow-Credentials”来表明自身是否支持用户凭证。这里的用户凭证类型包括Cookie、HTTP-Authentication报头以及客户端X.509证书（采用支持客户端证书的TLS/SSL）等。如果设置“Access-Control-Allow-Credentials”为true，那么“Access-Control-Allow-Origin”不能为”*”，必须是指定的站点。

有预检机制的后台代码设置：

[java]  view plain  copy

 

1. response.setHeader("Access-Control-Allow-Origin", "*");  
2. response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");  
3. response.setHeader("Access-Control-Max-Age", "3600");  
4. response.setHeader("Access-Control-Allow-Headers","x-requested-with,content-type");  

可以建立一个Filter

[java]  view plain  copy

 

1. package com.chinamobile.cmss.bcse.web.interceptor;  
2. import java.io.IOException;  
3. import javax.servlet.Filter;  
4. import javax.servlet.FilterChain;  
5. import javax.servlet.FilterConfig;  
6. import javax.servlet.ServletException;  
7. import javax.servlet.ServletRequest;  
8. import javax.servlet.ServletResponse;  
9. import javax.servlet.http.HttpServletResponse;  
10. import org.springframework.stereotype.Component;  
11. @Component  
12. public class SimpleCORSFilter implements Filter {  
13.   public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {  
14.     HttpServletResponse response = (HttpServletResponse) res;  
15.     response.setHeader("Access-Control-Allow-Origin", "*");  
16.     response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");  
17.     response.setHeader("Access-Control-Max-Age","3600");   response.setHeader("Access-Control-Allow-Headers","x-requested-with,  
18. content-type");  
19.     chain.doFilter(req, res);  
20.   }  
21.   public void init(FilterConfig filterConfig) {}  
22.   public void destroy() {}  
23. }  

在web.xml中添加代码：

[html]  view plain  copy

 

1. <filter>  
2.     <filter-name>cors</filter-name>     <filter-class>com.chinamobile.cmss.bcse.web.interceptor.SimpleCORSFilter</filter-class>  
3. </filter>  
4. <filter-mapping>  
5.     <filter-name>cors</filter-name>  
6.     <url-pattern>/*</url-pattern>  
7.  </filter-mapping>  

也可以只修改web.xml。在maven框架中添加maven依赖

[html]  view plain  copy

 

1. <dependency>  
2.     <groupId>com.thetransactioncompany</groupId>  
3.     <artifactId>cors-filter</artifactId>  
4.     <version>2.5</version>  
5. </dependency>  

web.xml加入配置

[html]  view plain  copy

 

1. <filter>  
2.     <filter-name>CORS</filter-name>  
3.     <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>  
4.     <init-param>  
5.         <param-name>cors.allowOrigin</param-name>  
6.         <param-value>*</param-value>  
7.     </init-param>  
8.     <init-param>  
9.         <param-name>cors.supportedMethods</param-name>  
10.         <param-value>GET, POST, HEAD, PUT, DELETE,OPTION</param-value>  
11.     </init-param>  
12.     <init-param>  
13.         <param-name>cors.supportedHeaders</param-name>  
14.         <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>  
15.     </init-param>  
16.     <init-param>  
17.         <param-name>cors.exposedHeaders</param-name>  
18.         <param-value>Set-Cookie</param-value>  
19.     </init-param>  
20.     <init-param>  
21.         <param-name>cors.supportsCredentials</param-name>  
22.         <param-value>true</param-value>  
23.     </init-param>  
24.     <init-param>  
25.         <param-name>cors.maxAge</param-name>  
26.         <param-value>3600</param-value>  
27.     </init-param></filter>  
28. <filter-mapping>  
29.     <filter-name>CORS</filter-name>  
30.     <url-pattern>/*</url-pattern></filter-mapping>