크로스 도메인, 프론트 엔드 개발에서 발생하는 일반적인 문제. AngularJS는 Ajax와 유사한 교차 도메인 방법을 구현하고 CORS 메커니즘을 사용합니다.
다음은 AngularJS에서 크로스 도메인 요청 데이터를 구현하기 위해 $ http의 사용에 대해 설명합니다.
Angularjs xmlhttprequest : $ http는 원격 서버에서 데이터를 읽는 데 사용됩니다.
$ http.post (url, data, [config]). success (function () {...}); $ http.get (url, [config]). success (function () {...}); $ http.get (url, config]). success (function () {...});1. $ http.jsonp [크로스 도메인 구현]
1. callback 및 콜백 함수 이름을 지정하십시오. 함수 이름이 JSON_CALLBACK 인 경우 성공 콜백 함수가 호출됩니다. JSON_CALLBACK 대문자에 있어야합니다.
2. 다른 콜백 함수를 지정하지만 창 아래에 정의 된 글로벌 함수 여야합니다. callback URL에 추가되어야합니다.
2. $ http.get [크로스 도메인 구현]
1. 다른 도메인 이름에서 액세스 할 수 있도록 서버를 설정합니다.
Response.SetHeader ( "액세스-제어-홀로-오리 린", "*"); // 모든 도메인 이름을 액세스 할 수 있도록 허용합니다 .SetHeader ( "Access-Control-Ollow-origin", "http://www.123.com"); // www.123.com이 액세스하도록 허용합니다
2. Angularjs 측면은 $http.get() 사용합니다.
3. $ http.post [크로스 도메인 구현]
1. 다른 도메인 이름에서 액세스 할 수 있도록 서버 측 설정과 응답 유형 및 응답 헤더 설정을 설정합니다.
Response.SetHeader ( "Access-Control-Origin", "*"); Response.SetHeader ( "Access-Control-allow-Methods", "Post"); Response.SetHeader ( "Access-Control-Hallow-Headers", "X- 요청, 콘텐츠 유형");
2. AngularJs 측면은 $http.post() 사용하고 동시에 요청 헤더 정보를 설정합니다.
$ http.post ( 'http : //localhost/ajax/getallindustrycategoty.pt', {languagecolumn : 'name_eu'}, { 'content-type': 'application/x-x-x-www-form-worlencoded'}).4. 구현 방법
크로스 도메인 방법 1 [ JSONP ] :
방법 1 : 방법 1
$ http.jsonp ( "http : //localhost/sitesettings/getbadgeinfo.pt?
메소드 2 [반환 값, 해당 콜백 메소드를 사용하여 수신해야하지만 $scope 에 넣는 방법] :
$ http.jsonp ( "http : //localhost/sitesettings/getbadgeinfo.pt? 응답 .setheader ( "", ""); SiteHandlerAction siteHandlerAction = (siteHandlerAction) beansfactory.getBean (siteHandlerAction.class); BadgeHandleraction BadgeHandleraction = (BadgeHandleraction) BeanSfactory.getBean (BadgeHandleraction.class); if ( "". equals (siteId) || siteId == null || stringUtils.isblank ( "jsonp")) {result = fail; } else {site site = siteHandlerAction.Find (siteId); userBadgestatus userBadgestatus = badgeHandlerAction.GetUserBadgestatus (site.getId ()); if (userbadgestatus! = null) {result = "{/"t/":)+userbadgestatus.getstyle()+",/"luge는"+"}"} "; jsonobject jsonobj = jsonobject.fromobject (결과); 문자열 json = jsonobj.tostring (); 결과 = jsonp + "(" + json + ")"; }} printwriter write = response.getWriter (); 쓰기 .print (결과); write.flush (); write.close (); 반환 없음;} 크로스 도메인 메소드 2 [ $http.get() ] :
함수 getAdustryController ($ scope, $ http) {$ http.get ( 'http : //localhost/ajax/getallindustrycate.pt? languecolumn = name_eu') .success (function (data) {$ scope.industries = data);}; 크로스 도메인 방법 3 [ $http.post() ] :
함수 getAdustryController ($ scope, $ http) { $ http.post ( 'http : //localhost/ajax/getallindustrycategoty.pt', {languagecolumn : 'name_eu'}, { 'content-type': 'application/x-x-x-www-form-typeoded'}) Java Side는 Cross-Domain 요청을 지원합니다. 공개 문자열 execute () {response.setheader ( "Access-Control-Ollow-Origin", "*"); // URL이 도메인에서 응답에 요청할 수있는 URL.SetHeader ( "Access-Control-allow-Methods", "Post"); // 허용 요청 메소드는 일반적으로 GET, POST, PIT, DELETE, OPTIONS RESPINGE.SETHEADER.SETHEADER ( "ACCESS-CONTROL-HALLOW-HEADERS", "X- recested-With, Content-Type"); // 요청 헤더가 허용되는 항목도메인을 가로 질 수 있습니다
SiteHandlerAction siteHandler = (siteHandlerAction) beansfactory.getBean (siteHandlerAction.class); 목록 List = siteHandler.getalLindustryCategory (); // 모든 분류 컬렉션 jsonarray jsonarray = jsonarray.fromobject (list); // 목록을 jsonstring json = jsonarray.tostring ()으로 변환합니다. // json 문자열로 변환 try {printwriter write = response.getwriter (); 쓰기 .print (json); write.close ();} catch (ioexception e) {e.printstacktrace ();} return none;}요약
위는이 기사에 관한 것입니다. 이 기사의 내용이 AngularJS 사용을 배우는 법을 배우는 데 도움이되기를 바랍니다.