SpringMvc+AngularJS通过CORS实现跨域方案
什么是跨域请求问题?
这个问题的起因在于现代浏览器默认都会基于安全原因而阻止跨域的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下的解决方案:
定义SimpleCORSFilter
import 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 SimpleCORSFilter 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.SimpleCORSFilter</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) { });
参考:
spring guide:https://spring.io/guides/gs/rest-service-cors/
SpringMvc+AngularJS通过CORS实现跨域方案的更多相关文章
- Angular通过CORS实现跨域方案
以前有一篇很老的文章网上转了很多,包括现在如果你百度"跨域"这个关键字,前几个推荐的都是"Javascript跨域总结与解决方案".看了一下感觉手段有点陈旧了, ...
- springboot基于CORS处理跨域问题
1. 为什么有跨域问题 跨域不一定都会有跨域问题. 因为跨域问题是浏览器对于ajax请求的一种安全限制:一个页面发起的ajax请求,只能是与当前页域名相同的路径,这能有效的阻止跨站攻击. 因此:跨域问 ...
- 14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域
本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一) ...
- 403 Invalid CORS request 跨域问题
5.跨域问题 跨域:浏览器对于javascript的同源策略的限制 . 以下情况都属于跨域: 跨域原因说明 示例 域名不同 www.jd.com 与 www.taobao.com 域名相同,端口不同 ...
- 403 Invalid CORS request 跨域问题 invalid+cors+request什么意思
5.跨域问题 跨域:浏览器对于javascript的同源策略的限制 . 以下情况都属于跨域: 跨域原因说明 示例 域名不同 www.jd.com 与 www.taobao.com 域名相同,端口不同 ...
- angularjs简单实现$http.post(CORS)跨域及$http.post传参方式模拟jQuery.post
1.开启angularjs的CORS支持 .config(function($httpProvider) { // CORS post跨域配置 $httpProvider.defaults.useXD ...
- cors解决跨域
什么是cors CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpReq ...
- Spring Boot2 系列教程(十四)CORS 解决跨域问题
今天和小伙伴们来聊一聊通过CORS解决跨域问题. 同源策略 很多人对跨域有一种误解,以为这是前端的事,和后端没关系,其实不是这样的,说到跨域,就不得不说说浏览器的同源策略. 同源策略是由 Netsca ...
- Spring Boot 通过CORS实现跨域
同源策略 很多人对跨域有一种误解,以为这是前端的事,和后端没关系,其实不是这样的,说到跨域,就不得不说说浏览器的同源策略. 同源策略是由 Netscape 提出的一个著名的安全策略,它是浏览器最核心也 ...
随机推荐
- J2EE进阶(七)利用SSH框架根据数据表建立model类
J2EE进阶(七)利用SSH框架根据数据表建立model类 前言 在利用SSH框架进行项目开发时,若将数据库已经建好,并且数据表之间的依赖关系已经确定,可以利用Hibernate的反转功能进行mode ...
- 远程调试Eclipse插件的设置
1. 被调试方建立一个命令行来运行Eclipse debugEclipse.cmd: eclipse.exe -nl zh_CN -vmargs -XX:+HeapDumpOnOutOfMemoryE ...
- Linux中的端口占用问题
本文将会阐述两种解决端口占用的方法. 本文会用到的服务器端的程序如下: #include "unp.h" #include <time.h> int main(int ...
- Unable to handle 'index' format version '2', please update rosdistro的解决办法
之前安装的ROS是Fuerte版本的,好久没有更新,不知不觉又出来了好几个新的版本,今天删除了Fuerte,计划安装Hydro版本的尝尝新,按照官网的安装流程,很快就可以把新版本安装上去了,但是在&q ...
- 小强的HTML5移动开发之路(10)——在线画板
来自:http://blog.csdn.net/dawanganban/article/details/18094557 在这一篇文章中我们用html5来实现一个在线的画板,玩过你画我猜的朋友今天也可 ...
- Get Form type using javascript in CRM 2011
Get from type var type = Xrm.Page.ui.getFormType(); getFromType() function returns integer value for ...
- 关于jQuery中的trigger和triggerHandler方法的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Dynamics CRM2011 隐藏sub-grid 新建项和添加现有项按钮
在CRM2011中ribbon区的自定义按钮可以通过工具例如RibbonEditor或者RibbonWorkbench进行配置包括action.display等等,但是系统级别的按钮是不能进行编辑的, ...
- Linux System Programming --Chapter Seven
文件和目录管理 一.文件与其元数据 我们首先看一下一个简单的文本文件是怎么保存的: 打开vim,编辑一段文本: [root@localhost ~]# vim hello.txt 编辑内容如下: op ...
- Win 32 编程之按钮消息响应(代码小错误修复)
最近不想用MFC写东西了,有没有安装Qt和其他图形化开发环境,只能捣鼓API了.于是乎,就有了以下的学习-- 首先,老套的创建个Windows窗口,由于自己有点小懒,就直接用Hello Word的源码 ...