Cross domain
Why cross domain?
- Because browser has the limitation of homology policy, homology policy is the core and basic security policy of browser.
- Port, protocol, domain name, there will be a different cross domain problem.
How to solve cross domain problems
- JSONP
- CORS
How does JSONP solve cross domain problems?
The so-called JSONP solution to the cross domain problem is that the front end dynamically adds a < script > tag at a suitable time, and requests the back end to bring a callback function to the interface.
Because the < script > tag is not restricted by the browser's same origin policy.
Touch and take you to unlock the principles of JSONP
Several steps to realize JSONP cross domain and JSONP principle
* * front-end * *
- The front end defines a callback function first
<script type="text/javascript" charset="utf-8"> function callback(data){ console.log(data) } </script>
2. At the appropriate stage, request the address given by the backend through the < script > tag with the callback parameter
<script src="http://192.168.1.107:3000?callback=callback" type="text/javascript" charset="utf-8"></script>
back-end
- Open an interface service
var express = require('express'); var app = express(); app.get('/',function(req,res,next){ res.end("ok") }) app.listen(3000,function(){ console.log('JSONP') })
2. When the front end requests the interface, get the callback of the requested parameters
app.get('/',function(req,res,next){ var callback = req.query.callback; })
3. Finally, the back end puts the required data into the acquired callback function parameter and returns it to the front end (string is returned). The browser will parse it into js for execution
app.get('/',function(req,res,next){ var callback = req.query.callback; //Data required for simulation var data = { err_ok:0, message:"Request successful", data:{ name:"july", age:21 } } res.end(`${callback}(${JSON.stringify(data)})`) })
Final backend code
var express = require('express'); var app = express(); app.get('/',function(req,res,next){ var callback = req.query.callback; //Data required for simulation var data = { err_ok:0, message:"Request successful", data:{ name:"july", age:21 } } res.end(`${callback}(${JSON.stringify(data)})`) }) app.listen(3000,function(){ console.log('JSONP') })
Final front end code
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript" charset="utf-8"> function callback(data){ console.log(data) } </script> <script src="http://192.168.1.107:3000?callback=callback" type="text/javascript" charset="utf-8"></script> </body> </html>
Results received by the front end
JSONP principle is simple here
--end--