First, let’s make some preparations. Otherwise, if you understand what I mean, others don’t understand. Even if others understand, then there will always be people who don’t understand. Then you have to say it. What I mean is that this explanation must be done. The answer is a must. In order to make it easier for everyone to understand.
We can demonstrate cross-domain problems by taking two main domain names or one main domain name + one second-level domain name as examples.
Client a.com
Server b.com or sacom
angularJs version V1.2.25
The preparations were done very well, and we almost exposed our editor as subline. I won’t tell him this ordinary person.
Someone has yelled that this question has been around for a long time. What's the point of asking it now? Could it be that you can still fool the flowers? Well, I can really write the flowers open. Let’s watch the show, what we are going to perform in this article is a complete cross-domain example.
Next, let's see how the client requests data
Note, our code is written under the a.com domain name
<!DOCTYPE html><html lang="en" ng-app="app"><head><meta charset="UTF-8"><title></title><script src="./angular.min.js"></script><script type="text/javascript">var app = angular.module('app', []);app.controller('appCtrl', ['$scope', function ($scope) {$http({method: 'JSONP',url: 'http://www.b.com/test.php?callback=JSON_CALLBACK',}).success(function (msg) {console.log(data);});//or $http.jsonp('http://www.b.com/test.php?callback=JSON_CALLBACK').success(function (msg){console.log(msg);}); }]);</script></head><body></body></html>We see that this is a cross-domain request directly in the form of jsonp, and its operation is exactly the same as the cross-domain request method in jquery. Note that our callback is fixed, that is, JSON_CALLBACK, try not to make any changes
Let's look at the way test.php handles requested data in server b.com. Here we use the native php method as a reference.
$callBack = isset($_GET['callback']) ? $_GET['callback'] : DEFAULT_CALLBACK; exit($callBack.'('.json_encode($data).')');Let's look back at the results of the client console.log record
At this point, we have successfully requested across the domain!
Finally, let’s make a small summary and pay attention to the key points:
1. The parameter added after the url requested by the client across domains is?callback=JSON_CALLBACK. The value of the parameter callback is specified as JSON_CALLBACK. Note that it is capitalized, that is, JSON_CALLBACK, do not make any changes. It feels like this is a big pit. If the value of callback is slightly changed, the client needs to define the callback function globally, and how can I pass it to $scope for processing? To avoid unnecessary trouble, here's what it means to do
2. Look at the server again. The server needs to specify $callBack = $_GET['callback']; receive callback, and you will also find that the received callback is not the value of callback written by our client. The client specifies JSON_CALLBACK to trigger the internal mechanism of angularJs.