Perfect cross-origin Ajax Solution

Perfect cross-origin Ajax Solution

The company wants to create an activity page in which all interfaces and ajax requests are found to be cross-origin. Here we will give a brief introduction to cross-origin and provide several solutions.

Due to browser-implemented same-source policy restrictions, XmlHttpRequest only allows requests to resources of the Current Source (domain name, protocol, port), so AJAX does not allow cross-origin. Three methods are provided:

1. jsonp access

JSONP (JSON with Padding) is an unofficial protocol that allows the server to integrate Script tags to return to the client and implement cross-origin access 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 requests. Even if you use post requests, it will automatically convert them to post;

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

2. damain Method

If the primary domain is the same and the subdomain is different, you can use this method to modify the domain name to point to the same domain name. This method can only solve the problem where the primary domain is the same but the secondary domain is different, two unrelated websites cannot use this method;

document.domain = 'a.com'

Note: In actual development, many people will debug interfaces locally. the localhost domain name is completely different from the Company domain name. All domain methods cannot produce results, the solution is to modify the host file in drive C and change the local address localhost to the Company domain name or the company second-level domain name. Then this method can be used.

The modified domain name points:

#127.0.0.1 localhost
127.0.0.1. com

3. postMessage

PostMessage is one of the new features of h5. As we are a company that is engaged in h5 games, it is inevitable to nest iframe to facilitate data submission.

Suppose that the Id of iframe is 'iframe ';

In the js file of iframe, enter

Var message = 'date'; <br> if (parent.doc ument. getElementById ('iframe') {// capture iframe var iframe = parent.doc ument. getElementById ('iframe '). contentWindow; // send the message parent. postMessage (message ,"*");}

Write in js outside iframe

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

Then you can get the message data.

The above is a perfect solution for Ajax cross-origin. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!