Java利用cors实现跨域请求实例

由于ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互，而浏览器出于安全考虑，不允许js代码进行跨域操作，所以会警告

网站开发，在某些情况下需要用到跨域。

什么是跨域？

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。

ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互，而浏览器出于安全考虑，不允许js代码进行跨域操作，所以会警告。

常见解决跨域的方式

script标签
iframe
jsonp
服务端中转请求
cors

今天的主角cors

全称：Cross-Origin Resource Sharing

中文意思：跨域资源共享

它在维基百科上的定义是：跨域资源共享（CORS ）是一种网络浏览器的技术规范，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。而这种访问是被同源策略所禁止的。CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。它是一个妥协，有更大的灵活性，但比起简单地允许所有这些的要求来说更加安全。

下面就说一下cors在java tomcat下如何配置

首先下载jar包

cors-filter与java-property-utils

<!-- https://mvnrepository.com/artifact/com.thetransactioncompany/cors-filter -->
<dependency>
  <groupId>com.thetransactioncompany</groupId>
  <artifactId>cors-filter</artifactId>
  <version>2.5</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.thetransactioncompany/java-property-utils -->
<dependency>
  <groupId>com.thetransactioncompany</groupId>
  <artifactId>java-property-utils</artifactId>
  <version>1.10</version>
</dependency>

修改web.xml

增加以下代码（最好放在其他filter前边）

<filter>     
  <filter-name>CORS</filter-name> 
  <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class> 
  <init-param> 
   <param-name>cors.allowOrigin</param-name> 
    <param-value>*</param-value> 
  </init-param> 
  <init-param> 
   <param-name>cors.supportedMethods</param-name> 
    <param-value>GET, POST, HEAD, PUT, DELETE</param-value> 
  </init-param> 
  <init-param> 
   <param-name>cors.supportedHeaders</param-name> 
    <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value> 
  </init-param> 
  <init-param> 
    <param-name>cors.exposedHeaders</param-name> 
    <param-value>Set-Cookie</param-value> 
  </init-param> 
  <init-param> 
    <param-name>cors.supportsCredentials</param-name> 
    <param-value>true</param-value> 
  </init-param>
</filter> 
 
<filter-mapping> 
  <filter-name>CORS</filter-name> 
  <url-pattern>/*</url-pattern> 
</filter-mapping>

jQuery请求示例

$.ajax("url", {
  type: "POST",
  xhrFields: {
    withCredentials: true,
    useDefaultXhrHeader: false
  },
  data: {
    type: "test"
  },
  dataType: 'json',
  crossDomain: true,
  success: function(data, status, xhr) {
   console.log(data);
  }
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。