The perfect solution of Ajax cross domain

Time:2020-2-18

The company needs to make an activity page and find all interfaces in the process. Ajax requests cross domains. Here is a brief introduction to cross domain and several solutions.

Due to the restriction of the same origin policy implemented by the browser, XMLHttpRequest only allows requests for resources of the current source (domain name, protocol, port), so AJAX is not allowed to cross domains. Here are three common methods:

1. JSON access

Jsonp (JSON with padding) is an unofficial protocol, which allows the integration of script tags on the server side to return to the client, and realizes cross domain access in the form of JavaScript callback;

Realization way

  1)


<script type="text/javascript"> 
  $.ajax({ 
    url:url, 
    dataType:'jsonp', 
    data:'', 
    jsonp:'callback', 
    success:function(result) { 
    }, 
  }); 
</script> 

  2)


$.getJSON(url+"?callback=?", 
  function(result) { 
  });

Note: 1) jsonp can only use get request, even if you use post request, it will automatically convert to post for you;

2】 Jsonp can be used not only to get data, but also to submit data.

2. Damain method

In the case of the same primary domain and different subdomains, this method can be used to modify the domain name direction so that they point to the same domain name. This method can only solve the case of the same primary domain and different secondary domain names. This method can not be used for two unrelated web addresses;


document.domain = 'a.com'

Note: in the actual development, many people will debug the interface locally. The domain name of localhost is totally different from that of the company, and the method of domain can not produce any effect. The solution is to modify the host file in Disk C, change the local address localhost to the company domain name or the company secondary domain name, and then this method can be used.

Here is the modified domain name:

#127.0.0.1  localhost
127.0.0.1 company.com

3、postMessage

PostMessage is one of the new functions of H5. Because we are a company that plays H5 games, it is inevitable to nest iframe to facilitate data submission.

It is assumed that the ID of iframe is’ iframe ‘;

In the JS of iframe, write

var message = 'date';<br>if (parent.document.getElementById(‘iframe‘)) {
          //Capture iframe
          var iframe = parent.document.getElementById(‘iframe').contentWindow;
          //Send message
          parent.postMessage(message, "*");
        }

Write it in JS outside iframe


window.addEventListener('message',function(e){
      },false);

Then you can get the message data.

The above is the perfect Ajax cross domain solution introduced by Xiaobian to you. I hope it can help you. If you have any questions, please leave a message to me, and Xiaobian will reply you in time. Thank you very much for your support of the developepaer website!

Recommended Today

The application of USB camera in rk3399

The application of USB camera in rk3399 1, introduction UVCFull nameUSB Video Class, is a set of standard customized by usb-if. All USB interface cameras complying with this standard can almost be used directly under Windows Linux and other systems, achieving the similar effect of drive free. Of course, it doesn’t mean that there is […]