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. cocos学习笔记:快速上手

    cc.Class({ //奇怪的语法风格,cc.class, extends: cc.Component, //扩展自cc.Component properties: { //类的属性设置 jumpH ...

  2. iOS 开发遇到的问题之(nil指针对NSDictionary及NSArray初始化的影响)

    nil指针对NSDictionary及NSArray初始化的影响 最近在做项目的时候遇到一个挺坑的崩溃问题,是由于NSDictionary初始化时nil指针引起的崩溃.假设我们现在要初始化一个{key ...

  3. C#socket通信-----多线程

    我在之前的socket通信的基础上做了一点改进,使用多线程来使用,程序更加简洁实用.不足之处请指教哦! 话不多说,之前的随笔也有介绍,直接上代码啦! 服务端socket(serverSocket): ...

  4. Java中如何获取spring中配置文件.properties中属性值

    通过spring配置properties文件 1 2 3 4 5 6 7 8 9 <bean id="propertyConfigurer"   class="co ...

  5. mysql忘记密码

    修改 /etc/my.cnf 添加 skip-grant-tables 修改完后重启mysql 这样就可以直接进入mysql 然后修改mysql数据库密码 mysql>update user s ...

  6. npm install报错Error: ENOENT

    E:\projects\ueditor\ueditor1_4_3_3-src>npm installError: ENOENT, stat 'C:\Users\Lucas\AppData\Roa ...

  7. DashPathEffect

    DashPathEffect 可以实现以动画的形式画线的效果. 通过setPathEffect()方法为画笔Paint对象设置绘制路径的特效. PathEffect pathEffect=new Da ...

  8. Android开发:在布局里移动ImageView控件

    在做一个app时碰到需要移动一个图案的位置,查了一上午资料都没找到demo,自己写一个吧 RelativeLayout.LayoutParams lp = new RelativeLayout.Lay ...

  9. Appium之python API

    webdriver contexts(self) 说明:返回多个会话内容 使用:driver.contexts current_context(self) 说明:返回单个会话的内容 使用:driver ...

  10. meta 360极速模式

    <meta name="render" content="webkit">  启用360极速模式