Ajax cross-domain perfect solution example sharing

The company wants to create an activity page, discover all interfaces in the process, and ajax requests cross domains. Here is a brief introduction to cross-domain and several solutions.

Due to the limitations of the same-origin policy implemented by the browser, XmlHttpRequest is only allowed to request resources from the current source (domain name, protocol, port), so AJAX is not allowed to cross domains. Here are three commonly used methods:

1. jsonp access

JSONP (JSON with Padding) is an unofficial protocol that allows Script tags to be integrated on the server side and returned to the client. , cross-domain access is achieved through javascript callback;

Implementation method

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 be automatically converted to post for you;

　2】jsonp can not only be used to obtain data, but also can be used to submit data.

2. damain method

When the main domain is the same and the subdomains are different, you can use this method to modify the domain name pointing so that they point to the same domain name. This method can only solve the problem. When the primary domain is the same but the secondary domain name is different, this method cannot be used for two unrelated URLs;

document.domain = 'a.com'

Note: In actual development, many people will debug the interface locally, localhost The domain name is completely different from the company's domain name, so the domain method cannot produce any effect. The solution is to modify the host file in the c drive, change the local address localhost to the company domain name or the company's second-level domain name, and then this The method is ready to use.

The following is the modified domain name pointing to:

#127.0.0.1 localhost
127.0.0.1 company.com

3, postMessage

PostMessage is One of the new features of h5. Since we are a company that makes h5 games, it is inevitable to nest iframes to facilitate data submission, etc.

It is assumed here that the Id of iframe is 'iframe';

In the js inside the iframe,

var message = 'date';<br>if (parent.document.getElementById(‘iframe‘)) {
          //捕获iframe
          var iframe = parent.document.getElementById(‘iframe').contentWindow;
          //发送消息
          parent.postMessage(message, "*");
        }

should be written. In the js outside the iframe, ## should be written. #

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

Then you can get the message data.

Related recommendations:

Error solution to parsererror under ajax cross-domain request

JS implements Ajax cross-domain request flask response content

Examples explain the principle of Ajax cross-domain requests

The above is the detailed content of Ajax cross-domain perfect solution example sharing. For more information, please follow other related articles on the PHP Chinese website!