跨域资源共享(CORS)问题解决方案
CORS:Cross-Origin Resource Sharing(跨域资源共享)
CORS被浏览器支持的版本情况如下:Chrome 3+、IE 8+、Firefox 3.5+、Opera 12+、Safari 4+
问题描述:A域中的脚本请求B域中的资源出现这种问题
报错信息:
XMLHttpRequest cannot load http://localhost:8082/servletdemo/doTest. No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:8080' is therefore not allowed access.
问题分析:
两个不同的域之间发送请求,浏览器出于安全因素考虑,所以不允许这种访问。
Cross-Origin Resource Sharing (CORS) is a specification that enables truly open access across domain-boundaries. If you serve public content,
please consider using CORS to open it up for universal JavaScript/browser access.
Granting JavaScript clients basic access to your resources simply requires adding one HTTP Response Header, namely:
Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: http://example.com:8080/
问题解决:
以下提供几种解决方法,根据实际情况选择
一、容器层面,影响范围是容器下的所有webapp应用
in tomcat/conf/web.xml ex:
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
ps:这个过滤器只针对apache-tomcat-7.0.41及以上版本。
二、单个应用,只作用于这个项目本身
in webapp/WEB-INF/web.xml
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
三、一组资源层面,作用于指定Filter过滤的全部请求资源
Filter方法代码 ex:
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
HttpServletRequest req = (HttpServletRequest) request;
HttpServletResponse res = (HttpServletResponse) response;
res.addHeader("Access-Control-Allow-Origin", "*");
res.addHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
res.addHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With");
chain.doFilter(req, res);
}
四、单个资源层面,只针对某一个资源
Servlet方法代码 ex:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setHeader("Access-Control-Allow-Origin","*");
PrintWriter out = response.getWriter();
out.write("{/"key/":/"value/"}");
out.flush();
out.close();
}
其中spring framework在4.2及以上支持cors注解,可参考https://spring.io/blog/2015/06/08/cors-support-in-spring-framework;
另一种https://spring.io/guides/gs/rest-service-cors/
五、针对单兵开发,我们原型maven-Archetype-wepapp提供两种支持
tomcat7-maven-plugin
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<version>2.2</version>
<configuration>
<path>/servletdemo</path>
<port>8082</port>
<server>tomcat</server>
<url>http://localhost:8080/manager/text</url>
<!-- Enable CORS -->
<tomcatWebXml>src/test/resources/tomcat.web.xml</tomcatWebXml>
</configuration>
</plugin>
jetty-maven-plugin
<plugin>
<groupId>org.eclipse.jetty</groupId>
<artifactId>jetty-maven-plugin</artifactId>
<version>9.3.2.v20150730</version>
<configuration>
<scanIntervalSeconds>10</scanIntervalSeconds>
<webApp>
<contextPath>/servletdemo</contextPath>
<!--Fix file locking problem with jettyrun Enable CORS-->
<defaultsDescriptor>src/test/resources/jetty.web.xml</defaultsDescriptor>
</webApp>
<httpConnector>
<!-- mvn -Djetty.port=8082 jetty:run -->
<port>8082</port>
</httpConnector>
</configuration>
<dependencies>
<dependency>
<groupId>org.eclipse.jetty</groupId>
<artifactId>jetty-servlets</artifactId>
<version>9.3.2.v20150730</version>
</dependency>
</dependencies>
</plugin>
跨域资源共享(CORS)问题解决方案的更多相关文章
- 跨域资源共享CORS与JSONP
同源策略限制: 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果没有同源策略,攻击者可以通过JavaScript获取你的邮件以及其他敏感信息,比如说 ...
- 跨域解决方案 - 跨域资源共享cors
目录 1. cors 介绍 2. 原理 3. cors 解决跨域 4. 自定义HTTP 头部字段解决跨域 5. 代码演示 5. 参考链接 1. cors 介绍 cors 说的是一个机制,其实相当于一个 ...
- VUE SpringCloud 跨域资源共享 CORS 详解
VUE SpringCloud 跨域资源共享 CORS 详解 作者: 张艳涛 日期: 2020年7月28日 本篇文章主要参考:阮一峰的网络日志 » 首页 » 档案 --跨域资源共享 CORS 详解 ...
- 网络编程-跨域资源共享 CORS
目录 1.什么是同源策略? 2.跨域资源共享 CORS 3.预检请求 4.CORS相关字段 5.Golang实现跨域 6.参考资料 1.什么是同源策略? 如果两个 URL 的 protocol.por ...
- 跨域资源共享 CORS
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从 ...
- 跨域资源共享 CORS 详解
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从 ...
- 使Web Api 支持跨域资源共享(CORS)
Reference:http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api Imp ...
- 跨域资源共享CORS详解
简介 CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请 ...
- 跨域资源共享 CORS 详解(转)
add by zhj: 公司在一个web产品上,做前后端分离,前后端提供独立的服务,使用不同的域名,通过http进行交互,在 前端,会涉及到跨域访问的问题,前端使用了CORS,后端同时需要做相应修改, ...
随机推荐
- 给博客添加Flash时钟
依稀记得在cnblogs很多大牛的博客里见到过大牛的新闻公告栏里那种动感十足的Flash时钟控件,先上图: 作为一名刚的接触博客菜鸟,自然免不了一番好奇.博客设置选项里翻来覆去找(以为是cnblogs ...
- B/S网站中IE6兼容问题
在HTML中定义的样式,部分样式在IE7以前的版本中的效果是不同的,所以需要在网页中定义让浏览器以IE8的模式启动. 在HEAD中定义标签meta如下: <meta http-equiv=&qu ...
- webpack + react + es6, 并附上自己碰到的一些问题
最近一直在学react,react的基础部分已经学得差不多了,然而自己并没有做详细的记录,有兴趣的同志可以参考阮一峰老师的教程,个人觉得挺不错的,链接如下:https://github.com/rua ...
- 转:Linux内部的时钟处理机制全面剖析
Linux内部的时钟处理机制全面剖析 在 Linux 操作系统中,很多活动都和时间有关,例如:进程调度和网络处理等等.所以说,了解 Linux 操作系统中的时钟处理机制有助于更好地了解 Linux 操 ...
- JS学习之事件流
本文是原创文章,如需转载,请注明文章出处 JS和AS师出同源,所以事件流的3个阶段也跟AS一样,分别是捕获阶段,目标阶段,冒泡阶段. 下面写了个例子可以清晰的看出事件流的顺序: eventTest.h ...
- 自己建二维obj
经常用到啊 在项目流程管理里面用到
- jsexcel导出插件
ExcelTable.js /* * author:wenluanlai */ (function ($) { Date.prototype.Format = function (fmt) { var ...
- java web 之 SpringMVC4.x配置
合肥程序员群:49313181. 合肥实名程序员群:128131462 (不愿透露姓名和信息者勿加入) Q Q:408365330 E-Mail:egojit@qq.com 综述: 有 ...
- HTML5的入门与深入理解
HTML5是对HTML的第5次重大的修改,虽然HTML5 标准还在制定中,但不能阻碍其势不可挡的脚步,不用HTML5你就OUT了.HTML5与我们常用的HTML4有什么区别呢? 首先要说的是不是所有的 ...
- [转]http-关于application/x-www-form-urlencoded等字符编码的解释说明
在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型. 下边是说明: application/x-www-form-urlen ...