1 jsonp

前端发送

function jsonp({url,params,cb}) {      return new Promise((resolve,reject)=>{        let script = document.createElement('script');        window[cb] = function (data) {          resolve(data);          document.body.removeChild(script);        }        params = {...params,cb} // wd=b&cb=show        let arrs = [];        for(let key in params){          arrs.push(`${key}=${params[key]}`);        }        script.src = `${url}?${arrs.join('&')}`;        document.body.appendChild(script);      });    }    // 只能发送get请求 不支持post put delete    // 不安全 xss攻击  不采用    jsonp({      url: 'http://localhost:3000/say',      params:{wd:'你好'},      cb:'show'    }).then(data=>{      console.log(data);    });复制代码

node后端接收

let express = require('express');let app = express();app.get('/say',function (req,res) {  let {wd,cb} = req.query;  console.log(wd);   res.end(`${cb}('你好')`) })app.listen(3000);复制代码

2 cors

• 前端向域名不同的地址发送Ajax请求
• 后端需要设置相应的请求头（内容如下）

let express = require('express');let app = express();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-Control-Allow-Methods','PUT');    // 允许携带cookie    res.setHeader('Access-Control-Allow-Credentials', true);    // 预检的存活时间    res.setHeader('Access-Control-Max-Age',6);    // 允许返回的头    res.setHeader('Access-Control-Expose-Headers', 'name');    if(req.method === 'OPTIONS'){      res.end(); // OPTIONS请求不做任何处理    }  }  next();});app.put('/getData', function (req, res) {  console.log(req.headers);  res.setHeader('name','jw');  res.end("你好")})app.get('/getData',function (req,res) {  console.log(req.headers);  res.end("你好")})app.use(express.static(__dirname));app.listen(4000);复制代码

3 postMessage

• a页面在端口3000下访问
• b页面在端口4000下访问

a.html

  
      
      
          复制代码

b.html

  
      
      
        
nihao
  复制代码

4 window .name

• a.html和b.html是同域的http://localhost:3000
• c.html是独立的http://localhost:4000
• a.html获取c.html的数据
• a.html先引用c.html, c.html把值放到window .name,把a引用的地址改到b

5 hash

• 路径后面的hash值可以用来通信(a.html和b.html是同域的，和c.html是跨域的)
• 目的a.html想访问c.html的内容
• a.html给c.html传一个hash值，c.html收到hash值后，c.html把hash值传递给b.html
• b.html将结果放到a.html的hash值中

a.html

  
      
      
          复制代码

b.html

  
      
      
        复制代码

c.html

  
      
      
      复制代码

6 document.domain

如果主域名相同，二级域名不同，想要数据通信，可以通过iframe嵌套，并且在嵌套者和被嵌套者的页面中声明

document.domain='相同的主域名'复制代码

7 websocket

前端页面

let socket = new WebSocket('ws://localhost:3000');    socket.onopen = function () {      socket.send('你好');    }    socket.onmessage = function (e) {      console.log(e.data);    }复制代码

node后端

let express = require('express');let app = express();let WebSocket = require('ws');let wss = new WebSocket.Server({port:3000});wss.on('connection',function(ws) {  ws.on('message', function (data) {    console.log(data);    ws.send('你好')  });})复制代码

8 nginx