Cross domain data request using jsonp

Preface ： This example is deployed in XAMPP Site integration software package , stay localhost Test in the environment

1、 What is cross-domain

Because of the browser homology strategy , All requests sent url The agreement 、 domain name 、 Any one of the three ports is different from the current page address, which is cross domain . There are cross domain situations :

（1） Different network protocols , Such as http Agreement to access https agreement .
（2） Different ports , Such as 8080 Port access 3000 port .
（3） Domain name is different , Such as aaaa.com visit bbbb.com.
（4） Different subdomains , Such as java.ddd.com visit qianduan.ddd.com.
（5） Domain names correspond to domain names ip, Such as www.a.com visit 20.205.28.90.

2、Jsonp Method

because srript There is no cross domain label , So the use of script label , load src route , Implement cross domain loading js file . The js A method needs to be defined in the file , Pass the method name to the server , The server uses the method name , Assemble a method call statement , Respond to the browser . The browser executes the statement to call the method . Through parameters , Take out the response data .

（1） Native JS Request mode

The front-end code ：

	var script = document.createElement('script');
	    script.type = 'text/javascript';
		script.src = './js/text.js';
		document.head.appendChild(script);
		//  Callback execution function 
		function onBack(res) {
    
		    console.log(res)   //{name:" Xiao Ming ",age：24}
		 }

Back end code ：

onBack({
    
	name:" Xiao Ming ",
	age:24
})

What needs to be noted here is , The data form of the back end must be used as the parameter of the function , And the function name should be consistent from front to back .

（2）Jquery Medium ajax Request mode

The front-end code ：

$.ajax({
    
			url:"./js/text.js",
			type:"GET",
			dataType:"jsonp",          //  Define the return method as jsonp
			jsonpCallback:"onBack",    // Define the callback function name , Keep the front and rear ends consistent 
			success:function(data){
    
				console.log(data)     //{name:" Xiao Ming ",age：24}
			},
			error:function(res){
    
				console.log(" request was aborted ！")
			}
		})

Back end code ：

onBack({
    
	name:" Xiao Ming ",
	age:24
})

• shortcoming 1： Only use get request .
• shortcoming 2： Because it uses script label , There are safety risks .
• advantage ： Support for older browsers , And can not support to CORS The website requests data .

---

original text ：https://blog.csdn.net/weixin_43948229/article/details/86528111