이제 브라우저 크로스 도메인 요청 데이터의 관련 문제에 대해 논의 해 봅시다. Cross-Domain 요청 데이터를 거부하는 것이 브라우저에 고유하지 않기 때문입니다. Cross-Domain이 데이터를 요청할 수없는 이유는 브라우저가 기본적으로 "동일한 오리핀 정책"이라는 보안 사양을 구현하기 때문입니다. 특정 사양은 무엇입니까? 다음 주소가있는 MDN의 프로필을 찾았습니다.
브라우저 상 동성 정책에 대한 설명
일반적으로 URL A와 URL B가 프로토콜, 포트 및 도메인 이름 측면에서 다른 경우 브라우저는 동일한 원인 정책을 시작하고 서버 A와 B 간의 데이터 요청을 거부합니다.
동일한 원천 전략에 대해 이야기 할 때, 당신이 얻는 지식은 얕습니다. 직접 연습해야합니다. 동일한 원천 전략은 어떻게 반영됩니까? 아래는 코드와 함께 단계별로 시연 할 것입니다.
1. 서버 A는 서버를 요청할 수 없습니다. b
교차 도메인이기 때문에 두 개의 도메인 이름, 즉 A와 LocalHost가 있다고 가정합니다. a 편집기는 Alibaba Cloud에서 도메인 이름을 호스팅한다는 것을 의미합니다. LocalHost는 이름에서 알 수 있듯이 내 개발 기계입니다. Server A의 간단한 스프링 버전 백엔드 서비스 인 LocalHost에 index.html 파일을 배포하는 시나리오를 상상하고 간단한 인터페이스를 제공하여 index.html 파일 호출에 노출시킵니다. 마지막으로, 브라우저는 LocalHost의 Index.html 파일을 요청하고 브라우저가 제기하는 내용을 확인합니다.
index.html
<! doctype html> <html> <head> <title> test cross-domain access </title> <meta charset = "utf-8"/> </head> <body> <script src = "https://cdn.bootcss.com/jquery/3.1/jquery.min.js"> script> <script> </javas " $ (document) .ready (function () {$ .ajax ({type : "get", async : true, url : "http : //a/hello/map/getuser.json", // 서버 A에서 인터페이스 유형을 요청합니다. </script> <h2> Hello World </h2> </body> </html>브라우저에 index.html 파일을 요청하면 다음과 같이 표시됩니다.
브라우저에 의해 요청이 거부되었음을 알 수 있으며, 우리에게 크로스 도메인 요청을 허용하지 않도록 촉구합니다. 매우 불편합니다. 그것을 해결하는 방법?
2. JSONP를 사용하여 크로스 도메인 요청을 해결하십시오
먼저, 원리에 대해 이야기합시다. JSONP는 크로스 도메인 문제를 해결합니다. 주로 <Script> 태그의 교차 도메이션, 즉 SRC 속성의 링크 주소에 도메인에서 액세스 할 수있는 기능을 사용합니다. 종종 SRC 속성 값을 CDN의 주소로 설정하고 관련 JS 라이브러리가로드 되었기 때문입니다.
index.html
<! docType html> <html> <head> <title> test cross-domain access </title> <meta charset = "utf-8"/> </head> <body> <script src = "https://cdn.bootcss.com/jquery/3.1/jquery.min.js"> script> <script> </javas ""> $ (document) .ready (function () {$ .ajax ({type : "get", async : true, jsonp : "callbackname", // 백엔드 인터페이스 매개 변수 이름 jsonpcallback : "callbackfunction", // callback function url : "http : //a/hello/map/map/json" JSONP 성공 : function (data) {console.log ( "success"); </script> <script type = "text/javaScript"> var callbackfunction = function (data) {alert ( '인터페이스에서 반환 한 데이터는 :' + json.stringify (data)); }; </script> </body> </html>서버의 인터페이스 코드는 다음과 같습니다.
/** * * 클래스 JSONBACKCONTROLLER. * * 설명 : 컨트롤러는 간단한 JSON 데이터 문자열을 반환하며 JSON 데이터는 간단한 사용자 객체로 구성되어 있습니다 * * @Author : Huangjiawei * @Since : 2018 년 6 월 12 일 * @version : $ $ $ $ $ $ $ ChangedBy $ * */ @restController @retimpontmapping (Value legger retgger jsontroller jsontroller jsontroller jsontroller jsontroller loggerfactory.getLogger (jsonbackcontroller.class); / *** 크로스 도메인 요청 데이터 해결* @param 응답* @param CallbackName 프론트 엔드 콜백 함수 이름* @return*/ @RequestMapping (value = "getUser.json") public void getUser (httpservletResponse response, @requestparam 문자열 콜백 이름) {user user = 새 사용자 ( "Huangjiawi", 22); Response.setContentType ( "Text/JavaScript"); 작가 작가 = null; try {writer = response.getwriter (); writer.write (CallbackName + "("); writer.write (user.toString ()); writer.write ( ");"); } catch (ioexception e) {logger.error ( "JSONP 응답 쓰기 실패! data :" + user.toString (), e); } 마침내 {if (writer! = null) {try {writer.close (); } catch (ioexception e) {logger.error ( "출력 스트림 닫기 예외!", e); } writer = null; }}}}백엔드는 매개 변수 CallbackName Callback 함수 이름으로 전달 된 다음 JS 코드를 프론트 엔드로 반환합니다. JS 코드 형식은 다음과 같습니다.
callbackName + ( data ) + ;
브라우저는 LocalHost 서버에서 index.html 파일을 요청하고 결과는 다음과 같습니다.
위의 방법은 jQuery + JSONP를 통해 크로스 도메인 문제를 해결합니다. <cript> 태그의 SRC 속성을 사용할 수 있다고 말하지 않았습니까? 네.
LocalHost 서버의 Index.html
<! docType html> <html> <head> <title> test cross-domain access </title> <meta charset = "utf-8"/> </head> <body> <script src = "https://cdn.bootcss.com/jquery/3.1/jquery.min.js"> script> <script> </javas ""> var callbackfunction = function (data) {alert ( '인터페이스가 반환 한 데이터는' + json.stringify (data)); }; </script> <script type = "text/javascript"src = "http : //a/hello/map/getuser.json? callbackname = callbackfunction"> </script> </body> </html>브라우저 디스플레이 효과는 위와 동일합니다. 그러나 여기서 SRC는 JS 파일을 소개한다는 것을 의미합니다. 인터페이스에 의해 직접 호출되고 인터페이스에서 반환 된 데이터는 JS 코드의 조각이되므로 실행할 수 있습니다. 또한, 두 번째 <cript> 태그의 순서를 되돌릴 수 없으며, 그렇지 않으면 CallbackFunction 함수를 찾을 수 없습니다.
프로젝트 코드 주소 : https://github.com/smallercoder/jsonpdemo
마지막으로, 요약하면, 교차 도메인 솔루션에 대한 많은 솔루션이 있으며, JSONP는 그 중 하나 일 뿐이며 특정 상황을 자세히 분석해야합니다. 이 기사가 도움이되기를 바랍니다. 읽어 주셔서 감사합니다. Github에 오신 것을 환영합니다. 또한 모두가 wulin.com을 더 지원하기를 바랍니다.