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. 给博客添加Flash时钟

    依稀记得在cnblogs很多大牛的博客里见到过大牛的新闻公告栏里那种动感十足的Flash时钟控件,先上图: 作为一名刚的接触博客菜鸟,自然免不了一番好奇.博客设置选项里翻来覆去找(以为是cnblogs ...

  2. B/S网站中IE6兼容问题

    在HTML中定义的样式,部分样式在IE7以前的版本中的效果是不同的,所以需要在网页中定义让浏览器以IE8的模式启动. 在HEAD中定义标签meta如下: <meta http-equiv=&qu ...

  3. webpack + react + es6, 并附上自己碰到的一些问题

    最近一直在学react,react的基础部分已经学得差不多了,然而自己并没有做详细的记录,有兴趣的同志可以参考阮一峰老师的教程,个人觉得挺不错的,链接如下:https://github.com/rua ...

  4. 转:Linux内部的时钟处理机制全面剖析

    Linux内部的时钟处理机制全面剖析 在 Linux 操作系统中,很多活动都和时间有关,例如:进程调度和网络处理等等.所以说,了解 Linux 操作系统中的时钟处理机制有助于更好地了解 Linux 操 ...

  5. JS学习之事件流

    本文是原创文章,如需转载,请注明文章出处 JS和AS师出同源,所以事件流的3个阶段也跟AS一样,分别是捕获阶段,目标阶段,冒泡阶段. 下面写了个例子可以清晰的看出事件流的顺序: eventTest.h ...

  6. 自己建二维obj

    经常用到啊 在项目流程管理里面用到

  7. jsexcel导出插件

    ExcelTable.js /* * author:wenluanlai */ (function ($) { Date.prototype.Format = function (fmt) { var ...

  8. java web 之 SpringMVC4.x配置

    合肥程序员群:49313181.    合肥实名程序员群:128131462 (不愿透露姓名和信息者勿加入) Q  Q:408365330     E-Mail:egojit@qq.com 综述: 有 ...

  9. HTML5的入门与深入理解

    HTML5是对HTML的第5次重大的修改,虽然HTML5 标准还在制定中,但不能阻碍其势不可挡的脚步,不用HTML5你就OUT了.HTML5与我们常用的HTML4有什么区别呢? 首先要说的是不是所有的 ...

  10. [转]http-关于application/x-www-form-urlencoded等字符编码的解释说明

    在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型. 下边是说明: application/x-www-form-urlen ...