前端跨域有哪些，跨域分别哪几种，前端怎麽实现跨域

有以下几种

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

1.jsonp

function jsonp({
    
    url,params,cb}) {
    
    
	return new Promise((resolve,reject) => {
    
    
		let script = document.cneateElement('script');
		window[cb] = function (data) {
    
    
			resolve(data);
			document.body.nemoveChild(script);
		}
		params = {
    
    …params,cb} // wd=b&cb=show
		let anrs =[];
		fon(let key in panams){
    
    
			arrs.push(`${
      
      key}=${
      
      params[key]}`);
		}
		script.src = `${
      
      url}?${
      
      arrs.join('&')}`;
		document.body.appendChild(script);
	})
}
jsonp({
    
    
	url: 'https://sp0.baidu.com/5alFazu8AA54nxGko9WTAnF6hhy/su',
	params:{
    
    wd:'b'},
	cb:'show'
}).then(data=>{
    
    
	console.log(data);
});
//只能发送get请求
//不安全，会被xss攻击

2.cors

• 前端设置cookie

document.cookie = 'name=zfpx';
xhn.withCredentials = true;		//强制带上cookie

• 在前端跨区请求数据，后端要在接口设置以下相关参数，并做相关处理

//设置白名单
let whitList = ['http://localhost:3000']
app.use(function (req，res,next) {
    
    
	let origin = req.headers.origin;
	if(whitList.includes(origin)){
    
    
		//设置哪个源可以访问我
		res.setHeader('Access-Control-Allow-Origin', origin);
		//允许携带哪个头访问我
		res.setHeader('Access-Control-Allow-Headers', 'name');
		//允许哪个方法访问我
		res.setHeader('Access-Contnol-Allow-Methods','PUT');
		//允许携带cookie，不设虽然强制带上cookie，但服务器不认识报错
		res.setHeader('Access-Control-Allow-Credentials', true);
		//预检的存活时间，不设时间，默认请求两次，以下有是否预检模式
		res.setHeader('Access-Control-Max-Age',6);//单位：秒
		//允许返回的头信息，不设默认报错不安全
		res.setHeader('Access-Control-Expose-Headers'3 'name');
		//判断是否为OPTIONS模式,因跨域会发两次请求，第一次验证，第二个才是正常访问的请求，第一次就是上面所谓的：预检，
		if(neq.method === 'OPTIONS'){
    
    
			res.end();// OPTIONS诺求不做任何处理
		}
	}
	next()
}

3.postMessage

• 甲系统页面

<iframe snc="http://localhost:4000/b.html" frameborder="0" id="frame" onload="load()"></iframe>

function load() {
    
    
	let frame = document.getElementById('frame');
	frame.contentWindow.postMessage('我要些数据','http://localhost:4000');//通信的地址
	window.onmessage = function (e) {
    
    
		console.log(e.data);	//接收过来的数据
	}
}

• 乙系统界面

window.onmessage = function (e) {
    
    
	console.log(e.data);	//传过来的数据
	e.source.postMessage('我是传回去的数据',e.origin);	//origin 为传过来的地址
}

4.window.name

• a系统页面代码

a和b同源页面：http ://localhost: 3000
c 足独立的： http ://localhost: 4000
a获取c的数据
a先引用c c把值放到window.name,把a引用的地址改到b
<ifname src="http://localhost:4000/c.html"
frameborder="0" onload="load()" id="iframe"></ifname>
<script>

let first = true
function load() {
    
    
	if(first){
    
    
		let iframe = document .gGtElementById('iframe');
		iframe.src = 'http://localhost:3000/b.html';
		first = false; ：
	}else{
    
    
		console.log(iframe.contentWindow.name);
	}
}

• c系统页面代码

	window.name = '我存的数据'

5.location.hash

• a系统页面代码

a和b同源页面：http ://localhost: 3000
c 足独立的： http ://localhost: 4000

<ifname src="http://localhost:4000/c.html#hashString"></ifname>

window.onhashchange = () => {
    
    
	console.log(location.hash);
}

• b界面

window.parent.parent.location.hash = location.hash

• c系统页面代码

let iframe = document .createElement('iframe');
iframe.src = 'http://localhost:3000/b.html#haxivalue';
document.body.appendChild(iframe);

6.document.domain

• a系统页面代码

仅限于一级域名与二级域名

<ifname src="http://b.net.cn:4000/b.html" frameborder="0" onload="load()" id="iframe"></ifname>

document.domain = 'net.cn'
function load(){
    
    
	console.log(iframe.contentWindow.a);	
}

• b界面

document.domain = 'net.cn'
var a = 100;

7.websocket

• 高级 API 不兼容
• 一般使用 socket.io
• 前端

let socket = new WebSocket('ws://localhost:3000');
socket.onopen = _ => {
    
    
	socket.send('我发消息给你');
}
socket.onmessage = data => {
    
    
	console.log(data);	//回复的信息
}

• 服务端

let WebSocket = require('ws');
let wss = new WebSocket.Server({
    
    port:3000});
wss.on('connection',ws => {
    
    
	ws.on('message',data => {
    
    
		console.log(data);
		ws.send('我回你的信息');
	})
})

8.nginx

• 下载地址：nginx 官网下载的地址

location ~.*\.json {
    
    	//允许访问该目录下所有json文件
	root json;		//根目录下的 json文件夹
	add_header 'Access-Control-Allow-Origin' '*'
}