Javaweb이 cors를 사용하여 도메인 간 Ajax 데이터 상호 작용을 완료하는 방법에 대한 분석 예-java지도 시간-php.cn

Javaweb이 cors를 사용하여 도메인 간 Ajax 데이터 상호 작용을 완료하는 방법에 대한 분석 예

黄舟

풀어 주다： 2017-09-20 10:13:44

원래의

1535명이 탐색했습니다.

이 기사는 크로스 도메인 및 Cors의 개념으로 시작한 다음 Cors를 사용하여 크로스 도메인 Ajax 데이터 상호 작용을 완료하는 Javaweb의 관련 콘텐츠를 소개합니다.

Cross-domain은 브라우저가 다른 웹사이트의 스크립트를 실행할 수 없음을 의미합니다. 이는 브라우저가 JavaScript에 적용한 보안 제한인 브라우저의 동일 출처 정책으로 인해 발생합니다.

ajax 자체는 실제로 XMLHttpRequest 객체를 통해 데이터와 상호 작용합니다. 그러나 보안상의 이유로 브라우저는 js 코드의 도메인 간 작업을 허용하지 않으므로 경고가 발생합니다.

cors

전체 이름: Cross-Origin Resource Sharing

중국어 의미: Cross-Origin Resource Sharing

Wikipedia에서의 정의: Cross-Origin Resource Sharing(CORS)은 웹 브라우저입니다. 웹 페이지가 다른 도메인의 리소스에 액세스할 수 있도록 웹 서버에 대한 방법을 정의하는 사양입니다. 이러한 종류의 액세스는 동일 출처 정책에 의해 금지됩니다. CORS 시스템은 브라우저와 서버가 상호 작용하여 도메인 간 요청이 허용되는지 여부를 결정하는 방법을 정의합니다. 이는 더 많은 유연성을 허용하는 절충안이지만 단순히 이러한 모든 요구 사항을 허용하는 것보다 더 안전합니다.

1. Maven을 통해 두 개의 jar 패키지

cors-filter 및 java-property-utils를 참조하고 pom.xml 파일에 다음 내용을 추가하세요

<!-- 跨域问题 --> 
  <dependency> 
  <groupId>com.thetransactioncompany</groupId> 
  <artifactId>cors-filter</artifactId> 
  <version>2.5</version> 
 </dependency> 
 <dependency> 
  <groupId>com.thetransactioncompany</groupId> 
  <artifactId>java-property-utils</artifactId> 
  <version>1.10</version> 
 </dependency>

로그인 후 복사

2. web.xml에 필터를 구성하고 가져온 jar에 정의된 필터를 사용하세요. cors.allowOrigin 노드 수정에 주의하세요. 모든 사이트에 대해 도메인 간 접근이 허용되는 경우에는 [*]로 수정할 수 있으며, 구성은 [,]로 구분할 수 있습니다.

<!-- 跨域问题 --> 
  <filter> 
  <description>跨域过滤器</description> 
  <filter-name>CORS</filter-name> 
  <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class> 
  <init-param> 
   <param-name>cors.allowOrigin</param-name> 
   <param-value>https://127.0.0.1:8380</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>

로그인 후 복사

3. jQuery를 통해 도메인 간 데이터를 호출합니다. 예제 코드는 다음과 같습니다.

<!DOCTYPE html> 
<html lang="en" xmlns="https://www.w3.org/1999/xhtml"> 
<head> 
 <meta charset="utf-8" /> 
 <title>跨域测试</title> 
 <style type="text/css"> 
  body{ 
   margin:0px auto 0px auto; 
  } 
  .p_container { 
   margin: 0px auto 0px auto; 
   width: 100%; 
   height: 200px; 
  } 
   .p_container > iframe { 
    width: 100%; 
    height: 100%; 
   } 
 </style> 
</head> 
<body> 
 <p> 
 </p> 
 <button id="btn_test">跨域调用</button> 
 <p id="p_show"></p> 
 <script src="jquery-1.8.3.min.js" type="text/javascript"></script> 
 <script type="text/javascript"> 
  $(function () { 
   $(&#39;#btn_test&#39;).click(function () { 
    //alert(&#39;dddd&#39;); 
    //var iframe_main = $("#iframe_main").contents(); 
    //iframe_main.find("#account").val(&#39;test&#39;); 
    $.ajax({ 
     url: "https://10.18.25.119:8480/jxfp/index.jsp", 
     type: "GET", 
     dataType: "text", 
     timeout: 10000, 
     xhr: function () {  //这是关键 获取原生的xhr对象 做以前做的所有事情 
      var xhr = jQuery.ajaxSettings.xhr(); 
      xhr.withCredentials = true; 
      return xhr; 
     },      
     success: function (data) { 
      $("#p_show").html(data); 
      //Console.log(data); 
     }, 
     error: function (e) { 
      $("#p_show").html(e.statusText); 
     } 
    }); 
   }); 
  }); 
 </script> 
</body> 
</html>

로그인 후 복사

위 내용은 Javaweb이 cors를 사용하여 도메인 간 Ajax 데이터 상호 작용을 완료하는 방법에 대한 분석 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!