How does JavaScript implement cross domain requests

  • 2021-07-07 06:33:02
  • OfStack

What is a cross-domain request?
The simple understanding is to send a request to a server file that is not in the same domain name. This is a practical example to illustrate 1. For example, baidu. com sends a request to cxyblog. com. These two domain names are different, so this is cross-domain. For security reasons, this is not allowed. In addition, it should be noted that requests sent by different subdomains, different ports of the same domain name or different protocols of the same domain name are also cross-domain, which can basically be classified into the following categories:
(1) http://www. baidu. com sends a request to http://www. cxyblog. com
(2) http://www.cxyblog. com sends a request to http://image. cxyblog. com
(3) http://www. baidu. com: 8000 Send a request to http://www. cxyblog. com
(4) http://www.cxyblog.com sends a request to https://www.ES40com
(5) http://www. cxyblog. com sends a request to http://112.65.242.67 (assuming the domain name www. cxyblog. com corresponds to IP that is 112.65. 242.67)
The above five cases are all cross-domain requests.

When will cross-domain requests be used?
Sometimes we encounter this cross-domain request operation problem when we need to use Javascript for Ajax operation.
Why can't cross-domain requests be realized by using javascript directly?
For security reasons, the browser does not allow Javascript to request cross-domain resources due to the restriction of javacript homology policy.
How to solve the problem that javascript can't realize cross-domain requests?
The solution used in this paper is to use FlyJSONP and JSONP to realize cross-domain request. FlyJSONP is a lightweight JavaScript class library, also known as JSON plug-in. After compression, the total size is about 3KB, which does not need the support of other frameworks.
FlyJSONP official website address: http://alotaiba.github.com/FlyJSONP/
So how do you use the FlyJSONP class library to implement cross-domain requests?

(1) First load the Javascript script for FlyJSONP, that is:

< script language="javascript" src="http://www.cxyblog.com/flyjsonp.min.js" > < /script >

(2) Then to initialize the instance of FlyJSONP, the parameter debug can be set to true or false, that is, FlyJSONP. init ({debug: true}), which means whether to open debugging information, and the parameter value is true or false;

(3) The next step is to use get method or post method to request data. The specific example code is as follows:


//FlyJSONP Implement cross-domain GET
function getData(){
 FlyJSONP.init({debug:true});// Initialization FlyJSONP Instance of, parameter debug Can be set to true Or false
 FlyJSONP.get({
  url:'http://www.cxyblog.com/article.json',// Object requested by the target URL
  parameters:{// Request parameter 
   limit:5
  },
  success:function(data){// The request was sent successfully 
   console.log(data);
  },
  error:function(errorMsg){// Failed to send request 
   console.log(errorMsg);
  }
 });
}
//FlyJSONP Implement cross-domain POST
function postData(){
 FlyJSONP.init({debug:true});// Initialization FlyJSONP Instance of, parameter debug Can be set to true Or false
 FlyJSONP.post({
  url:'http://www.cxyblog.com/article/new',
  parameters:{
   username:'cxyblog',
   api_key:'123456',
   title:'FlyJSONP',
   description:'test'
  },
  success:function(data){
   alert(data);
  }
 });
}

Note: When the server outputs to the client, the output must be an json string, otherwise the client cannot receive it.


Related articles: