用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.csdn.net/net_lover/article/details/5172509
http://blog.csdn.net/net_lover/article/details/5172522
http://blog.csdn.net/net_lover/article/details/5172532
---------------
浏览器在发送真正的http请求之前会发送OPTION类型的请求,执行预检,检查服务器支持的请求类型,
对请求头允许的特殊说明,得到服务器的批准,允许才发送实际的请求,服务器也可以向浏览器发送通知,
知会浏览器是否需要在请求中向服务器传递某些认证信息(cookie,或者Authentication认证数据),
下面的图形象描述了这个过程:
来自维基百科: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 {
}
}
至此,配置修改完毕,it works great.
不过,最后提醒一句:以上方式只是在开发测试的时候,为了方便才这么做的,安全原因,生产环境强烈不推荐。
谢谢大家~