Javaweb이 cors를 사용하여 도메인 간 Ajax 데이터 상호 작용을 완료하는 방법에 대한 분석 예
- 黄舟원래의
- 2017-09-20 10:13:441533검색
이 기사는 크로스 도메인 및 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 및 f8293c9a95b2c800a98c9e08a8fed1e6java-property-utils를 참조하고 pom.xml 파일에 다음 내용을 추가하세요54bdf357c58b8a65c66d7c19c8e4d114
<!-- 跨域问题 --> <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 () {
$('#btn_test').click(function () {
//alert('dddd');
//var iframe_main = $("#iframe_main").contents();
//iframe_main.find("#account").val('test');
$.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!