有以下几种
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}
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) ;
} ) ;
2.cors
document. cookie = 'name=zfpx' ;
xhn. withCredentials = true ;
在前端跨区请求数据,后端要在接口设置以下相关参数,并做相关处理
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' ) ;
res. setHeader ( 'Access-Control-Allow-Credentials' , true ) ;
res. setHeader ( 'Access-Control-Max-Age' , 6 ) ;
res. setHeader ( 'Access-Control-Expose-Headers' 3 'name' ) ;
if ( neq. method === 'OPTIONS' ) {
res. end ( ) ;
}
}
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) ;
}
4.window.name
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) ;
}
}
window.name = '我存的数据'
5.location.hash
a和b同源页面:http ://localhost: 3000
c 足独立的: http ://localhost: 4000
< ifname src = " http://localhost:4000/c.html#hashString" > </ ifname>
window. onhashchange = ( ) => {
console. log ( location. hash) ;
}
window. parent. parent. location. hash = location. hash
let iframe = document . createElement ( 'iframe' ) ;
iframe. src = 'http://localhost:3000/b.html#haxivalue' ;
document. body. appendChild ( iframe) ;
6.document.domain
仅限于一级域名与二级域名
< 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) ;
}
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
location ~ . * \. json {
root json;
add_header 'Access-Control-Allow-Origin' '*'
}