다양한 크로스 도메인 튜토리얼, 다양한 관행 및 다양한 Q & A 온라인. 간단한 JSONP 외에도 많은 사람들이 CORS가 작동하지 않으며 항상 하나 또는 두 개의 주요 구성이 부족하다고 말합니다. 이 기사는 문제를 해결하기를 원하며 모든 코드는 스스로 연습되었습니다.
이 기사는 크로스 도메인의 Get, Post, 데이터 및 쿠키와 같은 문제를 해결합니다.
이 기사는 요청 및 사후 요청에 대해서만 이야기합니다. 독자는 GET 요청을 제외한 다른 모든 요청 방법으로 게시물 요청을 이해해야합니다.
JSONP
JSONP는 브라우저가 스크립트 리소스 참조에 상 동성 제한이 없다는 원칙을 사용하고 스크립트 태그를 동적으로 삽입하며 페이지에 리소스가로드 된 직후에 실행됩니다. JSONP는 비공식 전송 프로토콜입니다. 이 프로토콜의 핵심 사항 중 하나는 사용자가 콜백을 전달하거나 처음에 콜백 메소드를 정의 할 수 있도록하고 매개 변수가 서버에 제공되는 것입니다. 서버가 데이터를 반환하면 콜백 매개 변수를 기능 이름으로 사용하여 JSON 데이터를 래핑하여 클라이언트가 자체 함수를 사용자 정의하여 반환 데이터를 자동으로 처리 할 수 있습니다.
JSONP는 GET 요청 만 지원하지만 Post와 같은 다른 유형의 HTTP 요청은 아닙니다. 크로스 도메인 HTTP 요청 만 지원합니다. 다른 도메인에서 두 페이지 사이에서 JavaScript 호출을하는 방법의 문제를 해결할 수는 없습니다. JSONP의 장점은 구식 브라우저를 지원하고 단점도 분명하다는 것입니다. 개발을 위해 클라이언트와 서버의 사용자 정의가 필요합니다. 서버에서 반환 한 데이터는 표준 JSON 데이터가 될 수 없지만 콜백으로 랩핑됩니다.
JSONP의 원리는 매우 간단하며 [프론트 엔드가 정적 자원을 요청할 때 교차 도메인 문제가 없다는 아이디어를 사용합니다].
그러나 그것은 단지 get을 지원하고, 지원 만 지원하며, 지원 만 제공합니다.
이 방법을 JSONP라고하므로 백엔드 데이터는 JSON 데이터를 사용해야합니다. 당신은 끈이나 무언가를 우연히 만들 수 없습니다. 그렇지 않으면 결과를 설명 할 수 없습니다.
프론트 엔드 jQuery 쓰기 방법
$ .ajax ({type : "get", url : url : baseurl + "/jsonp/get", datatype : "jsonp", success : function (응답) {$ ( "#response"). val (json.stringify (응답));});데이터 유형 : "JSONP". 이를 제외하고 다른 구성은 일반 요청과 동일합니다.
백엔드 SpringMVC 구성
SpringMVC를 사용하는 경우 JSONP 조언을 구성하므로 우리가 작성하는 모든 컨트롤러 방법이 클라이언트가 JSONP를 요청하는지 여부를 고려할 필요가 없으며 Spring은 자동으로 이에 따라 처리합니다.
@ControllerAdVicePublic 클래스 JSONPADVICE 확장 AbstractJsonPresponseBodyAdvice {public jsonpadvice () {// 요청에 콜백 매개 변수가 포함 된 경우 Spring이 JSONP 요청 슈퍼 ( "콜백")임을 알 수 있습니다. }}위의 필기 방법은 SpringMVC 버전이 3.2보다 낮지 않아야하며 업그레이드해야한다고 말할 수 있습니다.
백엔드 Non-SpringMVC 구성
처음 일하기 시작했을 때 Struts2는 여전히 인기가있었습니다. 몇 년 후 SpringMVC는 기본적으로 국내 시장을 지배했습니다.
게으르고 여기에 의사 코드가 있으며 메소드가 프론트 엔드로 돌아 오기 전에 랩 방법을 클릭하십시오.
@ControllerAdVicePublic 클래스 JSONPADVICE 확장 AbstractJsonPresponseBodyAdvice {public jsonpadvice () {// 요청에 콜백 매개 변수가 포함 된 경우 Spring이 JSONP 요청 슈퍼 ( "콜백")임을 알 수 있습니다. }}코스
크로스 오리핀 자원 공유
CORS는 최신 브라우저가 크로스 도메인 리소스 요청을 지원하는 방법입니다. 전체 이름은 "Cross-OriginResourcesharing"입니다. xmlhttprequest를 사용하여 요청을 보낼 때, 브라우저는 요청이 동일한 오리핀 정책을 준수하지 않으며 요청 헤더를 요청에 추가합니다 : 원산지. 배경은 일련의 처리를 수행합니다. 요청을 수락하기로 결정한 경우 응답 헤더가 반환 결과에 추가됩니다 : 액세스-제어-홀로-오리핀; 브라우저는 해당 헤더에 원점 값이 포함되어 있는지 여부를 결정합니다. 있으면 브라우저가 응답을 처리하고 응답 데이터를 얻을 수 있습니다. 브라우저에 브라우저가 포함되어 있지 않으면 응답 데이터를 얻을 수 없습니다.
Cors와 JSONP는 같은 목적을 사용하지만 JSONP보다 강력합니다. CORS는 모든 브라우저 요청 유형을 지원하며 요청 된 데이터의 양은 더 크고 개방적이고 간결합니다. 서버는 처리 된 데이터 만 직접 반환하면 특별 처리가 필요하지 않습니다.
결국 JSONP는 모든 요청을 충족시킬 수없는 요청을 지원하는 것만 지원하므로 CORS는 옮겨야합니다.
국내 웹 개발자는 여전히 매우 어렵습니다. 사용자는 브라우저를 업그레이드하지 않으며 Boss는 여전히 개발자가 호환되기를 원합니다.
Cors는 다음 브라우저를 지원합니다. 현재 브라우저의 문제는 점점 덜 중요 해지고 있으며 Taobao조차도 IE7 ~~~를 지원하지 않습니다.
크롬 3+
Firefox 3.5+
오페라 12+
사파리 4+
인터넷 익스플로러 8+
프론트 엔드 jQuery 쓰기 방법
코드를보십시오.
$ .ajax ({type : "post", url : baseurl + "/jsonp/post", datatype : 'json', crossdomain : true, xhrfields : {withcredentials : true}, data : {name : "name_from_frontend"}, success : function (response) // json json data (응답) // $ ( "#response"). val (json.stringify (응답));Datatype : "JSON", 여기 JSONP가 아닌 JSONP가 아닌 JSON이 있습니다.
Crossdomain : True, 여기에서는 Cross-Domain 요청을 사용하는 것을 의미합니다
xhrfields : {withcredentials : true}, 구성이 쿠키를 가져올 수 있도록, 그렇지 않으면 세션을 유지할 수없고 많은 사람들이 여기에 갇혀 있습니다. 물론이 요구 사항이없는 경우이를 구성 할 필요가 없습니다.
백엔드 SpringMVC 구성
대부분의 웹 프로젝트의 경우 일반적으로 MVC 관련 구성 클래스가 있으며 WebMVCConfigurerAdapter에서 상속됩니다. SpringMVC 4.2 이상을 사용하는 경우 다음과 같은이 방법을 추가하십시오.
@ConfigurationPublic 클래스 WebConfig는 WebMvcConfigurerAdapter {@override public void addcorsmappings (corsregistry registry) {registry.addmapping ( "/**/*"). allendorigins ( "*"); }}불행히도 프로젝트에서 SpringMVC 버전이 4.2보다 낮 으면 "곡선을 통해 국가를 저장"해야합니다.
Public Class CrossDomainFilter는 OncePerRequestFilter를 확장합니다. {@Override Protected void dofilterinternal (httpservletrequest request, httpservletreponse responsk, filterchain filterchain)은 servletexception, ioexception.addheader ( "Access-control-rallow-origin", " *", " *" 응답을 내려다보십시오 .addheader ( "액세스-제어-승인 신용성", "true"); response.addheader ( "액세스-제어-홀로 메토드", "get, post, put, delete"); response.addheader ( "Access-Control-Hallow-Headers", "Content-Type"); filterchain.dofilter (요청, 응답); }}Web.xml에서 필터를 구성합니다.
<filter> <filter-name> CrossDomainFilter </filter-name> <filter-class> com.javadoop.filters.crossdomainfilter </filter-class> </filter> <filter-name> CrossDomainFilter </filter-name>/*</url-pattern> </url-pattern>
Shiro를 사용하는 많은 프로젝트가 있으며 Shiro 필터를 구성 할 수도 있으므로 여기에 소개하지 않습니다.
대부분의 프로젝트에 대한 일반적인 구성으로 구성 할 수있는 매우 일반적인 구성에 대해 이야기하고 있습니다. 독자는 기사에서 "*"와 같은 구성을 일치시키는 방법을 알아야합니다.
독자가 브라우저가 '*'기호를 사용할 수 없다고 프롬프트하는 경우, 리더는 위의 필터의 요청 객체에 따라 요청 헤더에서 Referer (requesseader ( "Referer")를 가져온 다음 "Access-Control-Orgal-Origin": 동적으로 설정할 수 있습니다.
문자열 참조 = request.getheAder ( "CERERER"); if (stringUtils.isNotBlank (CEERTER)) {url url = new URL (참조); String origin = url.getProtocol () + ": //" + url.gethost (); response.addheader ( "Access-Control-Origin", Origin);} else {response.addheader ( "Access-Control-Ollow-Origin", "*");}프론트 엔드 비 본수 쓰기
하나의 트릭으로 jQuery를 먹는 날은 완전히 사라졌습니다. 여기서는 jQuery를 사용하지 않으면 Post Cross-Domain의 문제를 해결하는 방법에 대해 이야기하겠습니다.
기본 JS를 소개하겠습니다.
함수 createCorsRequest (method, url) {var xhr = new xmlhttprequest (); if (xhr의 "withedentials") {// 속성이있는 속성이 있으면 xmlhttprequest2 객체입니다. 세 번째 매개 변수 xhr.open (method, url, true)을보십시오. } else if (XdomainRequest! = "undefined") {//이 개체는 도메인 xhr = new XdomainRequest ()에 걸쳐 요청하는 데 사용됩니다. xhr.open (메소드, URL); } else {// 그렇다면 불행히도 브라우저는 cors xhr = null을 지원하지 않습니다. } return xhr;} var xhr = createCorsRequest ( 'get', url); if (! xhr) {Throw New Error ( 'cors not support');}그 중 Chrome, Firefox, Opera 및 Safari는이 "프로그래머 친화적 인"브라우저는 xmlhttprequest2 객체를 사용합니다. 즉, XdomainRequest를 사용합니다.
요약
위의 모든 것은 JSONP와 CORS를 신속하게 해결하는 것입니다. 모든 사람에게 도움이되기를 바랍니다. 관심있는 친구는이 사이트의 다른 관련 주제를 계속 참조 할 수 있습니다. 단점이 있으면 메시지를 남겨주십시오.