九种跨域方案解决(偏后台)

清疚 2023-06-30 14:54 12阅读 0赞

同源策略：协议、域名和端口号都一致叫同域

为什么浏览器不支持跨域呢？

*  cookie localstorage等等不支持跨域
 *  dom元素也有同源策略，比如iframe
 *  ajax不支持跨越

实现跨域：

*  jsonp
 *  cors
 *  postMessage
 *  document.domain
 *  window.name
 *  location.hash
 *  http-proxy
 *  nginx
 *  websocket

### 1 jsonp ###

## ##

### 2 cors ###

**index.html**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			//2cors
    			let xhr=new XMLHttpRequest;
    			document.cookie="name=afpx";
    			// 强制带好凭证再发送请求
    			xhr.withCredentials=true;
    			xhr.open('PUT','http://localhost:4000/getData',true);
    			xhr.setRequestHeader('name','afpx')
    			xhr.onreadystatechange=function(){
    				if(xhr.readyState==4){
    					if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
    						console.log(xhr.response)
    					}
    				}
    			}
    			xhr.send();
    		</script>
    	</body>
    </html>

**server.js**

let express=require('express');
    let app=express();
    
    app.use(express.static(__dirname));
    app.listen(3000);

**server2.js**

## ##

### 3 postMessage ###

**index.html**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<iframe 
    		  src="http://localhost:4000/index2.html"
    		  id="iframe"
    		  onload="load()">
    		</iframe>
    		<script type="text/javascript">
    			//3
    			function load(){
    				let frame=document.getElementById('iframe');
    				frame.contentWindow.postMessage('我爱你','http://localhost:4000')
    				window.onmessage=function(e){
    					console.log(e.data)
    				}
    			}
    		</script>
    	</body>
    </html>

**index2.html**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			window.onmessage=function(e){
    				console.log(e.data)
    				e.source.postMessage('我不爱你',e.origin);
    			}
    		</script>
    	</body>
    </html>

**server.js**

let express=require('express');
    let app=express();
    
    app.use(express.static(__dirname));
    app.listen(3000);

**server2.js**

let express=require('express');
    let app=express();
    
    app.use(express.static(__dirname));
    app.listen(4000);

## ##

### 4 window.name ###

**index.html**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<iframe 
    		  src="http://localhost:4000/index3.html"
    		  id="iframe"
    		  onload="load()">
    		</iframe>
    		<script type="text/javascript">
    			let first=true;
    			function load(){
    				if(first){
    					let iframe=document.getElementById('iframe');
    					iframe.src="http://localhost:3000/index2.html"
    					first=false;
    				}else{
    					console.log(iframe.contentWindow.name)
    				}
    				
    			}
    		</script>
    	</body>
    </html>

**index2.html**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			
    		</script>
    	</body>
    </html>

**index3.html**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<script>
    			window.name="我不爱你"
    		</script>
    	</body>
    </html>

**server.js**

let express=require('express');
    let app=express();
    
    app.use(express.static(__dirname));
    app.listen(3000);

**server2.js**

let express=require('express');
    let app=express();
    
    app.use(express.static(__dirname));
    app.listen(4000);

### 5 location.hash ###

**index.html**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		
    		
    		<iframe 
    		  src="http://localhost:4000/index3.html#iloveyou"
    		  id="iframe">
    		</iframe>
    		<script type="text/javascript">
    			window.onhashchange=function(){
    				console.log(location.hash)
    			}
    		</script>
    	</body>
    </html>

**index2.html**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			window.parent.parent.location.hash=location.hash;
    		</script>
    	</body>
    </html>

**index3.html**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<script>
    			console.log(window.location.hash)
    			let iframe=document.createElement('iframe');
    			iframe.src="http://localhost:3000/index2.html#idontloveyou"
    			document.body.appendChild(iframe);
    		</script>
    	</body>
    </html>

### 6 document.domain ###

**index.html**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		helloa
    		
    		
    		
    		
    		<iframe 
    		  src="http://localhost:3000/index2.html"
    		  id="iframe"
    		  onload="load()">
    		</iframe>
    		<script type="text/javascript">
    			document.domain="zf1.cn"
    			function load(){
    				var iframe=document.getElementById('iframe')
    				console.log(iframe.contentWindow.a);
    			}
    		</script>
    	</body>
    </html>

**index2.html**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		hellob
    		<script type="text/javascript">
    			document.domain="zf1.cn"
    			var a=100;
    		</script>
    	</body>
    </html>

### 7 websocket ###

**index.html**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			// 高级api 不兼容 socket.io(一般使用它)
    			let socket=new WebSocket('ws://localhost:3000');
    			socket.onopen=function(){
    				socket.send('我爱你');
    			}
    			socket.onmessage=function(e){
    				console.log(e)
    			}
    		</script>
    	</body>
    </html>

**server.js**

### 8 nginx ###

先下载nginx，然后配置

### 9 http-proxy ###

以后再学