SpringMvc互联AngularJS通过代码拦截实现跨域方案
2016-07-30 12:29
274 查看
什么是跨域请求问题?
这个问题的起因在于现代浏览器默认都会基于安全原因而阻止跨域的ajax请求,这是现代浏览器中必备的功能,但是往往给开发带来不便。但跨域的需求却一直都在,为了跨域,勤劳勇敢的程序猿们想出了许许多多的方法,例如,jsonP、代理文件等等。但这些做法增加了许多不必要的维护成本,而且应用场景也有许多限制,例如jsonP并非XHR,所以jsonP只能使用GET传递参数。
在移动应用风生水起的如今,托HTML5的福,Mobile Web,甚至Hybird App也逐渐火起来,在本地文件系统的Web页面,也有需要获取外部数据的需求,而这些需求也必然是跨域的。同时,HTML5也来带了叫“Cross-Origin Resource Sharing”的新特性,来赋予开发者权力决定资源是否允许被跨域访问。
如何解决?
CORS,CrossOrigin Resources Sharing,也即跨源资源共享,是 HTML5 的一项特性,它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。
通过服务器增加一个特殊的Header[Access-Control-Allow-Origin]来告知客户端跨域的限制,如果浏览器支持CORS的话,如果判断Origin通过的话,就会允许XHR进行请求,而不需要再使用jsonP或者代理文件。
使用这个Header返回被允许请求跨域请求的来源域,例如网站duelist.cn设置了下面的Header
Access-Control-Allow-Origin: http://smdcn.net
这样设置之后,通过http://smdcn.net下的页面对于duelist.cn进行ajax请求就会被允许,而其他网站对duelist.cn依旧会被阻拦,通过这种方式网站拥有者可以自己对此进行限制。
当然,如果不想限制来源,可以通过
Access-Control-Allow-Origin: *
来允许任何站点对该资源进行跨域请求
在SpringMVC下的解决方案:
定义拦截器AngularFilterimport java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Component;
@Component
public class AngularFilter implements Filter {
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
chain.doFilter(req, res);
}
public void init(FilterConfig filterConfig) {}
public void destroy() {}
}
web.xml:
<filter>
<filter-name>cors</filter-name>
<filter-class>com.app.filter.<span style="background-color: rgb(254, 254, 254); font-family: 'Helvetica Neue', Helvetica, Tahoma, Arial, STXihei, 'Microsoft YaHei', 微软雅黑, sans-serif;">AngularFilter </span>
</filter-class>
</filter>
<filter-mapping>
<filter-name>cors</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
angularjs端代码:
$http({ method: "post", url: "http://localhost:8080/eifs/usr/login.json", data: {para1:"para1",para2:"para2"}, headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).success(function (data) { }).error(function (data) { }); $http.get('http://localhost:8080/eifs/usr/login.json', {params:{para1:"para1",para2:"para2"},timeout: 10000}) .success(function (data, status, headers, config) { }).error(function (data, status, headers, config) { });
相关文章推荐
- 详解可跨域的单点登录(SSO)实现方案【附.net代码】
- 可跨域的单点登录(SSO)实现方案【附.net代码】
- Angular通过CORS实现跨域方案
- 可跨域的单点登录(SSO)实现方案【附.net代码】
- SpringMvc+AngularJS通过CORS实现跨域方案
- 详解可跨域的单点登录(SSO)实现方案【附.net代码】
- SpringMvc+AngularJS通过CORS实现跨域方案
- SpringMvc+AngularJS通过CORS实现跨域方案
- Angular通过CORS实现跨域方案
- Angular通过CORS实现跨域方案
- 通过CORS实现跨域方案
- HTML--如何实现通过鼠标事件拖动页面图像(代码)
- 通过设置p3p头来实现跨域访问cookie
- C#实现通过程序自动抓取远程Web网页信息的代码
- 关于解决应用层提取NDIS驱动数据包丢包的方案,通过event加共享内存实现
- HTML--如何实现通过鼠标事件拖动页面图像(代码)
- HTML--如何实现通过鼠标事件拖动页面图像(代码)
- 追求代码质量: 通过测试分类实现敏捷构建
- asp中通过getrows实现数据库记录分页的一段代码
- asp中通过getrows实现数据库记录分页的一段代码