跨域的7种解决方案

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://test-circle.seeyouyima.com/v3/topic_detail?topic_id=36185682');
xhr.send();
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }else {
        console.log(xhr.statusText);
    }
}

var root = 'dev.a.com';
document.domain = 'a.com'; // right
document.domain = 'b.com'; // error

/*client*/
function jsonp({url, param, callback}) {
  return new Promise((resolve, reject) => {
    let script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    window[callback] = function(data) {
      resolve(data);
      document.body.removeChild(script); // 调用完以后删除节点
    }

    // 拼接get参数
    param = {...param, callback};
    let query = [];
    for(let i in param) {
      query.push(`${i}=${param[i]}`);
    }

    script.src = `${url}?${query.join('&')}`;
    document.body.appendChild(script);
  });
}

jsonp({
  url: 'http://localhost:4000/',
  param: {from: '3000'},
  callback: 'foo',
}).then(res => {
  console.log(res, '获取到结果。。。');
})

/*service*/
let express = require('express');
let app = express();
app.get('/', function(req, res) {
  console.log(req.query, 77);
  res.send(`${req.query.callback}({
    "code": 0,
    "name": "wml",
    "age": 26
  })`);
});
app.listen(4000, function() {
  console.log('server is running...');
});

// client.js
let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:4000/', true);
xhr.onreadystatechange = function() {
  console.log(xhr.readyState, xhr.status, xhr.response);
}
xhr.send();

// server.js
let express = require('express');
let app = express();
const whiteList = ['http://localhost:7009']
app.get('/', function(req, res) {
  if(whiteList.includes(req.headers.origin)) {
    res.setHeader('Access-Control-Allow-Origin', req.headers.origin);
    res.send({
      "code": 0,
      "name": "wml",
      "age": 18
    });
  }
});
app.listen(4000, function() {
  console.log('server is running...');
});

//client.js
let xhr = new XMLHttpRequest();
xhr.open('PUT', 'http://localhost:4000/', true);
xhr.setRequestHeader('name', 'wml');
xhr.onreadystatechange = function() {
  console.log(xhr.readyState, xhr.status, xhr.response);
}
xhr.send();

let express = require('express')
let app = express()
let whitList = ['http://localhost:7009'] //设置白名单
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('/', function(req, res) {
  console.log(req.headers, 88)
  res.setHeader('name', 'wml2') //返回一个响应头，后台需设置
  res.end(`{
    "code": 0,
    "name": "wml",
    "age": 18
  }`)
});
app.listen(4000, function() {
  console.log('server is running...');
});

// client
let socket = new WebSocket('ws://localhost:4000');
socket.onopen = function() {
  socket.send('I am client');
}
socket.onmessage = function(msg) {
  console.log('receive msg: ', msg.data);
}

// server
let websocket = require('ws');
const webSocketServer = websocket.Server;
const wss = new webSocketServer({
  port: 4000
});
wss.on('connection', function(ws) {
  console.log(`[SERVER] connection()`);
  ws.on('message', function(message) {
    console.log(`server receive msg: ${message}`);
    ws.send(`I am server`, err => {
      console.log(err, 'err');
    })
  })
})

// client
let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:3000/', true);
xhr.send();

// proxy server
const http = require('http');
const server = http.createServer((request, response) => {
  // 浏览器和代理服务器交互设置cors首部字段
  response.writeHead(200, {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': '*',
    'Access-Control-Allow-Headers': 'Content-Type'
  });
  // 将请求转发给服务器（4000）
  http.request({
    host: 'localhost',
    port: 4000,
    method: request.method,
    headers: request.headers
  }, res => {
    // 收到响应
    let datas = '';
    res.on('data', chunk => {
      datas += chunk;
    });
    res.on('end', () => {
      console.log(`the data is ${datas}`);
      // 将响应转发给浏览器
      response.end(datas);
    });
  })
  .end();
});
server.listen(3000, function() {
  console.log('the proxy server is running...');
})

// server
const http = require('http');
const data = {
  name: 'wml',
  age: 18
}
const server = http.createServer((request, response) => {
  if(request.url === '/') {
    response.end(JSON.stringify(data));
  }
});
server.listen(4000, () => {
  console.log('the server is running...');
})