Implement cross-origin ajax requests based on iframe to obtain ajax data in webpages.

Implement cross-origin ajax requests based on iframe to obtain ajax data in webpages.

As we all know, ajax requests cannot be sent in different domains. the browser reports the following error:

At the same time, the embedded iframe cannot perform cross-domain communication, that is, the iframe of different domains cannot read data from each other (of course, the hash change can be used to pass data from the parent window to the Child iframe, ). When iframe is used for cross-origin communication, the browser reports the following error:

In fact, these two problems are caused by cross-origin.

The following describes how to solve this problem..

In fact, the key to the problem is that the browser will compare the address of the current webpage when parsing the ajax request address. If it is cross-origin, it will be disabled and an error will be reported. If we make the ajax address parsed by the browser the same as that of the current webpage, the browser will not prohibit our request.

Then how does the browser parse the url?

First, when the browser accesses a domain name, it will query whether there is a corresponding IP address in the local DNS cache for this URL. If yes, it will directly obtain the IP address from the local and then access it. If no, the browser sends a DNS request to the DNS server to obtain the IP address corresponding to the domain name, and then stores it in the local cache for access.

So between the above problems, we only need to forge a domain name resolution method locally, and then carry out cross-domain requests through the forged domain and target domain.

Open C: \ windows \ System32 \ drivers \ etc in Windows
There is a hosts file in this folder. If you change hosts to Google, you should be familiar with this file. Add the following code in the hosts file:

127.0.0.1 a. Target URL. com

In this way, you can access. target URL. com is the same as accessing localhost. The purpose is to facilitate the establishment of local services, so there will be no cross-origin problems between the local service and the target domain name, in this way, you can initiate a cross-origin request to the target domain by inserting the iframe tag on the target webpage locally to obtain the data of the target domain.

Code directly (jQuery is used)

Script code, directly inserted in the parent domain

Var mySrc = "http: //. target URL. com: 9000/myIframe.html "; document. domain = "target URL. com "; // key code to promote the domain to the root domain $ (" body "). append ('<iframe src =' + mySrc + 'name = "myIframe" id = "getData"> </frame> '); // insert iframevar interval to the target webpage; function start () {$ ("# getData "). attr ({"src": mySrc}); interval = setInterval (function () {window. myIframe. run (getLogitic); // input the callback function}, 10000)} function stop () {clearInterval (interval);} funct Ion getLogitic (orderId) {$. ajax ({url: '/query? '+ OrderId +' & id = 1 & valicode = & temp = '+ Math. random (), method: 'get', success: function (res) {console. log (res); // you can call the subdomain method here to transfer data to a local file.}, error: function (err) {console. log ('err: ', err );}})}

Html code in iframe

<! DOCTYPE html> 
Note:
Only by raising iframe to the root domain can we communicate with the parent window. the domain command can only promote the current domain to the current root domain. This is also the reason why the local hosts file must be modified. This is the root solution to the cross-domain problem.
Before capturing data on the target webpage, you must first check the method in which the target webpage sends ajax requests to obtain the requested api, insert a script in the console of the target webpage, and then run the script to obtain the expected data, in the form of a local request and a local request, the request is sent to the local device.
The following is the process of capturing the logistics information on a logistics query page:

 
 
 
  
This is the target URL. This is the script that is inserted into the target webpage. After the script is successfully inserted, the webpage will be inserted with a local address, but the domain name is the same as the iframe of the target domain.

 


Result
The data can be sent back to the local device upon successful request.

In fact, xiaobian is also the front-end of the preliminary knowledge, and is still in the process of learning and exploring, hoping to learn and make progress together with everyone.
Articles you may be interested in:

 

 
  
Processing Summary After JQuery ajax obtains data (html, xml, json)
 
  
Use of ajax jsonp for cross-origin requests
 
  
Overview and examples of JQuery's Ajax cross-origin request principles
 
  
Implementation of AJAX cross-origin request json data
 
  
Sample Code for getting JSON format data using Ajax in jQuery
 
  
Implementation of jquery's ajax and getJson cross-origin acquisition of json data
 
  
Example of jquery cross-origin request sharing (jquery sends ajax requests)
 
  
Node. js + Ajax: Get the data returned by the HTTP server
 
  
Configure the server to implement AJAX cross-origin requests
 
  
Solve the Problem of cookie loss in ajax cross-origin requests