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. Linux 常见问题解决办法

    1.用户切换后显示 -bash-4.1 $ 表示该用户下的配置文件缺失,切换到该用户下(-bash-4.1),使用命令查(pwd)看用户所在位置.如 /home/gpadmin. 使用 cp -a / ...

  2. angularJS中的ui-router和ng-grid模块

    关于angular的教程,学习了一下angular的ui-router和ng-grid这两个模块,顺便模仿着做了一个小小的东西. 代码已经上传到github上,地址在这里https://github. ...

  3. Scope 安装和使用

    Scope 安装和使用 一.安装 1. 软件下载 https://sourceforge.net/projects/cscope/files/ 2. 解压 3. 安装 ./configure --pr ...

  4. OneProxy添加license

    proxy-license=XXXX-XXXX-XXXX-XXXX 放到proxy.conf中,然后重启proxy

  5. No package mysql-server available.

    Centos 7 comes with MariaDB instead of MySQL. MariaDb is a open source equivalent to MySQL and can b ...

  6. SPSS数据分析—典型相关分析

    我们已经知道,两个随机变量间的相关关系可以用简单相关系数表示,一个随机变量和多个随机变量的相关关系可以用复相关系数表示,而如果需要研究多个随机变量和多个随机变量间的相关关系,则需要使用典型相关分析. ...

  7. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  8. 不刷新页面获取HTML进行显示

    $.ajax({ url: "请求地址",          dataType: "text",         type: "GET"   ...

  9. jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

    想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  10. Python笔记总结week5

    Decorator:多层装饰器 #双层装饰器(用户登录,权限) #多层: 调用从最外层到最内层函数,返回值则从最内到最外层函数 USER_INFO = {} #USER_INFO['is_login' ...