用springmvc 开发为 app 提供后台服务遇到跨域请求的问题

浏览器使用的chrome，安装了cors插件（开启允许跨域请求）

然后访问远程服务器提供的服务的时候，浏览器console 输出如下形式的错误信息：

问题1.OPTION: xxxxxx url地址

问题2.XMLHttpRequest cannot load ：xxxxx url 地址

Request header field xxxx is not allowed by Access-Control-Allow-Headers

----------

OPTIONS方法是用于请求获得由Request-URI标识的资源在请求/响应的通信过程中可以使用的功能选项。

通过这个方法，客户端可以在采取具体资源请求之前，决定对该资源采取何种必要措施，或者了解服务器的性能。

如果想详细了解ajax跨域请求，可以参考这位作者的三篇文章，It's awesome！

详解AJAX跨域请求：

http://blog.****.net/net_lover/article/details/5172509

http://blog.****.net/net_lover/article/details/5172522

http://blog.****.net/net_lover/article/details/5172532

---------------

浏览器在发送真正的http请求之前会发送OPTION类型的请求，执行预检，检查服务器支持的请求类型，

对请求头允许的特殊说明，得到服务器的批准，允许才发送实际的请求，服务器也可以向浏览器发送通知，

知会浏览器是否需要在请求中向服务器传递某些认证信息（cookie，或者Authentication认证数据），

下面的图形象描述了这个过程：

用springmvc 开发为 app 提供后台服务遇到跨域请求的问题

来自维基百科：https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

别的不多说，就是说我们需要在服务器端允许，OPTION 类型的请求，可以解决问题1；

在服务器端设置允许的源、请求头包含信息、允许的方法，deviceName,deviceID 是我的项目需要的，根据您的需要去设置，

'Access-Control-Allow-Origin': '*',

'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept,deviceName,deviceID',

'Access-Control-Allow-Methods': 'GET, POST, PUT',

---------------

spring中的设置方法：

web.xml中做如下配置：

<security-constraint>    
   <web-resource-collection>    
      <url-pattern>/*</url-pattern>    
      <http-method>PUT</http-method>    
      <http-method>DELETE</http-method>    
      <http-method>HEAD</http-method>    
      <!--<http-method>OPTIONS</http-method>-->  <!-- 注意需要去掉的就是这行，解决问题1 -->  
      <http-method>TRACE</http-method>    
   </web-resource-collection>    
   <auth-constraint>    
   </auth-constraint>    
</security-constraint>    
<login-config>    
    <auth-method>BASIC</auth-method>    
</login-config>

　　<!-- rest cors request filter 解决问题2-->
    <filter>
        <display-name>RequestHeaderFilter</display-name>
        <filter-name>RequestHeaderFilter</filter-name>
        <filter-class>com.xxx.filter.RequestHeaderFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>RequestHeaderFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

新增一个RequestHeaderFilter：

public final class RequestHeaderFilter implements Filter {

    /**
     * Default constructor.
     */
    public RequestHeaderFilter() {
    }

    /**
     * @see Filter#destroy()
     */
    public void destroy() {
    }

    /**
     * @see Filter#doFilter(ServletRequest, ServletResponse, FilterChain)
     */
    public void doFilter(ServletRequest request, ServletResponse response,
            FilterChain chain) throws IOException, ServletException {

        // 设置允许跨域访问
        HttpServletResponse httpServletResponse = (HttpServletResponse)response;
        
        httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");
        // 允许 header中包括 deviceName,deviceID
        httpServletResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept,deviceName,deviceID");
        
        chain.doFilter(request, httpServletResponse);
    }

    /**
     * @see Filter#init(FilterConfig)
     */
    public void init(FilterConfig fConfig) throws ServletException {
    }

}

用springmvc 开发为 app 提供后台服务遇到跨域请求的问题

相关推荐