Home > Developer > Web Develop
Frontend cross-origin and cross-Origin
1. Front-End cross-origin form (post)The project requires that a large number of values be transferred across domains to another server. From the ajax perspective, cross-origin is the get method. Based on this, the solution constructs a <form> form and sends the form to the other server through action, the other server needs some cooperation.
Sender post.html
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Meta content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0, user-scalable = no "name =" viewport ">
</Head>
<Body>
<Script>
Function postcallback (data ){
}
</Script>
<Form action = "http: // 10.16.92.34: 81/xampp/index. php" method = "post" target = "ifr-result">
<Input type = "text" name = "data"/>
<Input type = "submit" value = "submit"/>
</Form>
<Iframe name = "ifr-result"> </iframe>
</Body>
</Html>
The other server receives index. php <? Php
$ Data = '{"ret": 0, "msg": "OK "}';
// Jump to the current domain to execute the result
Header ("Location: http: // 10.16.92.34: 81/xampp/ifr-callback.php? Data = ". urlencode ($ data ));
Redirect to the same Domain Name Service internal processing ifr-callback.php <? Php
Header ('content-type: text/javascript ');
Echo '<script> ';
// Call back the result returned by the function processing on the original page.
Echo 'parent. postcallback ('. $ _ GET ['data'].'); ';
Echo '</script> ';
2. Cross-origin front-end CORS (post)CORS cross-origin Resource Sharing: defines a way for the browser to interact with the server to determine whether cross-origin requests are allowed.
Details: front-end code: post.html <! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Meta content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0, user-scalable = no "name =" viewport ">
</Head>
<Body>
<Script>
Var xhr = new XMLHttpRequest ();
Xhr. open ("GET", "http: // 10.16.92.34: 81/xampp/index. php", true );
Xhr. send ();
Xhr. onreadystatechange = ajaxCallback;
Function ajaxCallback (data ){
If (xhr. readyState = 4 & xhr. status = 200 ){
Console. log (data );
Console. log (data. srcElement. responseText );
}
}
</Script>
</Body>
</Html>
The server supports CORS mainly by setting Access-Control-Allow-Origin. Index. php <? Php
Header ("Access-Control-Allow-Origin :*");
$ Data = '{"ret": 0, "msg": "OK "}';
// Jump to the current domain to execute the result
Header ("Location: http: // 10.16.92.34: 81/xampp/ifr-callback.php? Data = ". urlencode ($ data ));
Ifr-callback.php? Php
Header ("Access-Control-Allow-Origin :*");
Header ('content-type: text/json ');
// Call back the result returned by the function processing on the original page.
Echo $ _ GET ['data'];
3. H5 cross-origin postMessage
A) Use postMessage and onmessage in Web WorkersStep 1: compile a main thread page work.html <Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> Test Web worker </title>
<Script type = "text/JavaScript">
Function init (){
Var worker = new Worker ('HTTP: // res.imtt.qq.com/cloud_based_adp/sdktagdemo/js/compute.js ');
// The event parameter has the data attribute, Which is the result data returned by the Child thread.
Worker. onmessage = function (event ){
// Add the result returned by the sub-thread to the div
Document. getElementById ("result"). innerHTML + =
Event. data + "<br/> ";
};
}
</Script>
</Head>
<Body onload = "init ()">
<Div id = "result"> </div>
</Body>
</Html>
Step 2: send information to the main thread-compute. jsvar I = 0;
Function timedCount (){
For (var j = 0, sum = 0; j <100; j ++ ){
For (var I = 0; I <100000000; I ++ ){
Sum + = I;
}
}
// Call postMessage to send messages to the main thread
PostMessage (sum );
}
PostMessage ("Before computing," + new Date ());
TimedCount ();
PostMessage ("After computing," + new Date ());
B) Use postMessage and onmessage for cross-Origin document communication
Step 1: Construct a page cross-domain.html page in the domain (embed a subpage through iframe and call the postMessage method to send data) <Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> Test Cross-domain communication using HTML5 </title>
<Script type = "text/JavaScript">
Function sendIt (){
// Send data to the subwindow through postMessage
Document. getElementById ("otherPage"). contentWindow
. PostMessage (
Document. getElementById ("message"). value,
"Http: // 10.16.92.34: 81"
);
}
</Script>
</Head>
<Body>
<! -- Embed a subpage through iframe -->
<Iframe src = "http: // 10.16.92.34: 81/xampp/other-domain.html"
Id = "otherPage"> </iframe>
<Br/>
<Input type = "text" id = "message"> <input type = "button"
Value = "Send to child.com" onclick = "sendIt ()"/>
</Body>
</Html>
Step 2: Listen to onmessage events in the B-domain page other-domain.html subwindow and display the data sent from the parent window <Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> Web page from child.com </title>
<Script type = "text/JavaScript">
// The event parameter has the data attribute, which is the data sent from the parent window.
Window. addEventListener ("message", function (event ){
// Display the data sent from the parent window in the Child Window
Document. getElementById ("content"). innerHTML + = event. data + "<br/> ";
}, False );
</Script>
</Head>
<Body>
Web page from http: // 10.16.92.34: 81
<Div id = "content"> </div>
</Body>
</Html>
Operation reference diagram:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
