SoFunction
Updated on 2025-04-04

A brief discussion on cross-domain post solution

Cross-domain, a common problem encountered in front-end development. AngularJS implements cross-domain method similar to Ajax and uses the CORS mechanism.

The following explains the use of $http to implement cross-domain request data in AngularJS.

AngularJS XMLHttpRequest: $http is used to read data from a remote server

$(url, data, [config]).success(function(){ ... });
$(url, [config]).success(function(){ ... });
$(url, [config]).success(function(){ ... });

1. $【Implementation of Cross-Domain】

1. Specify the callback and callback function name. When the function name is JSON_CALLBACK, the success callback function will be called. JSON_CALLBACK must be in uppercase.

2. Specify other callback functions, but must be global functions defined under window. Callback must be added to the url.

2. $【Implementation of Cross-Domain】

1. Set the server to allow access under other domain names

("Access-Control-Allow-Origin", "*"); // Allow all domain names to access("Access-Control-Allow-Origin", "http://"); //Accessible access

2. AngularJS side uses $()

3. $【Implementation of Cross-Domain】

1. Set the server side to allow access under other domain names, as well as response type and response header settings

("Access-Control-Allow-Origin", "*");
("Access-Control-Allow-Methods","POST");
("Access-Control-Allow-Headers","x-requested-with,content-type");

2. AngularJS side uses $() and sets request header information at the same time

$('http://localhost/ajax/',{languageColumn:'name_eu'},{'Content-Type':'application/x-www-form-urlencoded'}).success(function(data){
 $ = data;
 });

4. Implementation method

Cross-domain method one [JSONP]:

Method 1:

$("http://localhost/sitesettings/?jsonp=JSON_CALLBACK&siteid=137bd406").success(function(data){ ... });
// The name of the callback should be the string JSON_CALLBACK.

Method 2 [Return value, you need to use the corresponding callback method to receive it, but how to put it in $scope?]:

$("http://localhost/sitesettings/?jsonp=badgeabc&siteid=137bd406");
function badgeabc(data){ ... }
public String execute() throws Exception { 
 String result = FAIL;
 ("", "");
 SiteHandlerAction siteHandlerAction = (SiteHandlerAction)();
 BadgeHandlerAction badgeHandlerAction = (BadgeHandlerAction)();
 if("".equals(siteid) || siteid == null || ("jsonp")){
 result = FAIL;
 }else{
 Site site = (siteid);
 UserBadgeStatus userBadgeStatus = (());
 if(userBadgeStatus != null){
  result = "{\"t\":"+()+",\"l\":"+userBadgeStatus.getSuspend_location()+",\"s\":"+()+"}";
  JSONObject jsonObj = (result);
  String json = ();
  result = jsonp + "(" + json + ")";
 }
 }
 PrintWriter write = ();
 (result);
 ();
 ();
 return NONE;
}

Cross-domain method two [$()]:

function getAdustryController($scope,$http){
 $('http://localhost/ajax/?languageColumn=name_eu').success(function(data){
 $ = data;
 });
}

Cross-domain approach three [$()]:

function getAdustryController($scope,$http){
 $('http://localhost/ajax/',{languageColumn:'name_eu'},{'Content-Type':'application/x-www-form-urlencoded'}).success(function(data){
 $ = data;
 });
}
// Java side supports cross-domain requestspublic String execute(){
 ("Access-Control-Allow-Origin", "*"); // Which URLs are allowed to request to this domain across domains ("Access-Control-Allow-Methods","POST"); //The allowed request methods are generally GET, POST, PUT, DELETE, OPTIONS ("Access-Control-Allow-Headers","x-requested-with,content-type"); // Which request headers are allowed to cross domain 
 SiteHandlerAction SiteHandler = (SiteHandlerAction) ();
 List list = (); //All classification collections JSONArray jsonArray = (list); //Convert list to json String json = (); //Convert to json string try {
 PrintWriter write = ();
 (json);
 ();
 } catch (IOException e) {
 ();
 }
 return NONE;
}

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.