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)问题解决方案的更多相关文章

  1. 跨域资源共享CORS与JSONP

    同源策略限制: 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果没有同源策略,攻击者可以通过JavaScript获取你的邮件以及其他敏感信息,比如说 ...

  2. 跨域解决方案 - 跨域资源共享cors

    目录 1. cors 介绍 2. 原理 3. cors 解决跨域 4. 自定义HTTP 头部字段解决跨域 5. 代码演示 5. 参考链接 1. cors 介绍 cors 说的是一个机制,其实相当于一个 ...

  3. VUE SpringCloud 跨域资源共享 CORS 详解

    VUE  SpringCloud 跨域资源共享 CORS 详解 作者:  张艳涛 日期: 2020年7月28日 本篇文章主要参考:阮一峰的网络日志 » 首页 » 档案 --跨域资源共享 CORS 详解 ...

  4. 网络编程-跨域资源共享 CORS

    目录 1.什么是同源策略? 2.跨域资源共享 CORS 3.预检请求 4.CORS相关字段 5.Golang实现跨域 6.参考资料 1.什么是同源策略? 如果两个 URL 的 protocol.por ...

  5. 跨域资源共享 CORS

    CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从 ...

  6. 跨域资源共享 CORS 详解

    CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从 ...

  7. 使Web Api 支持跨域资源共享(CORS)

    Reference:http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api Imp ...

  8. 跨域资源共享CORS详解

    简介 CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请 ...

  9. 跨域资源共享 CORS 详解(转)

    add by zhj: 公司在一个web产品上,做前后端分离,前后端提供独立的服务,使用不同的域名,通过http进行交互,在 前端,会涉及到跨域访问的问题,前端使用了CORS,后端同时需要做相应修改, ...

随机推荐

  1. div+css常见浏览器兼容问题以及解决办法

    1.图片下方出现几像素的空白间隙问题说明:这个问题在ie6和ff(火狐)下经常见到,例如 <div><img src=""/></div>这个图 ...

  2. ZigBee 安全探究

    ZigBee 安全探究 0x02 ZigBee安全机制 (注:对于本节内容,可能在新版ZigBee协议标准中会有所变化,请以新版为准.) ZigBee主要提供有三个等级的安全模式: 1. 非安全模式: ...

  3. (原创)RS232串口信号定义

    好久没用动硬件了,串口更是好久没用用了. 曾经接口信号记得很清楚,久了,忘了. 今天,重新回顾,笔记记下. DB9接口分公头和母头,公头即插针头,电脑机箱上多少公头.母头即插孔座. 合理的硬件设计均以 ...

  4. YYCache设计思路及源码学习

    设计思路 利用YYCache来进行操作,实质操作分为了内存缓存操作(YYMemoryCache)和硬盘缓存操作(YYDiskCache).内存缓存设计一般是在内存中开辟一个空间用以保存请求的数据(一般 ...

  5. javascript控制cookie

    参考:http://www.cnblogs.com/ly312/archive/2010/07/14/1777190.html function getCookies(name) { var arr ...

  6. 反射(Reflection)

    反射主要用于在程序运行期间动态解析相关类的类名,命名空间,属性,方法并进行相应操作,以下通过两个简单的例子进行了说明: 示例1:调用程序集内部方法,运行时动态获取相关类的信息,包括类名,命名空间等信息 ...

  7. checkbox点击后出现div

    HTML: <div class="msg_editUrl_function"> <label class="labelChecked" fo ...

  8. JavaScript中如何获取某年某月有多少天的问题

    function getDaysInOneMonth(year, month){ month = parseInt(month,10); var d= new Date(year,month,0); ...

  9. 新春测 kinect motor

    大年30,祝所有开发伙伴新春快乐. 天天FQ, 叹国内学习成本太高 看到一篇台湾 kinect 电机控制, 赞 using Microsoft.Kinect; using System; using ...

  10. css学习归纳总结(一) 转

    原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...