// index.html
function jsonp({ url, params, callback }) {
 return new Promise((resolve, reject) ={
 let script = document.createElement('script')
 window[callback] = function(data) {
  resolve(data)
  document.body.removeChild(script)
 }
 params = { ...params, callback } // wd=b&callback=show
 let arrs = []
 for (let key in params) {
  arrs.push(`${key}=${params[key]}`)
 }
 script.src = `${url}?${arrs.join('&')}`
 document.body.appendChild(script)
 })
}
jsonp({
 url: 'http://localhost:3000/say',
 params: { wd: 'Iloveyou' },
 callback: 'show'
}).then(data ={
 console.log(data)
})

// server.js
let express = require('express')
let app = express()
app.get('/say', function(req, res) {
 let { wd, callback } = req.query
 console.log(wd) // Iloveyou
 console.log(callback) // show
 res.end(`${callback}('我不愛(ài)你')`)
})
app.listen(3000)

$.ajax({
url:"http://crossdomain.com/jsonServerResponse",
dataType:"jsonp",
type:"get",//可以省略
jsonpCallback:"show",//->自定義傳遞給服務(wù)器的函數(shù)名，而不是使用jQuery自動(dòng)生成的，可省略
jsonp:"callback",//->把傳遞函數(shù)名的那個(gè)形參callback，可省略
success:function (data){
console.log(data);}
});

// 允許哪個(gè)方法訪問(wèn)我
res.setHeader('Access-Control-Allow-Methods', 'PUT')
// 預(yù)檢的存活時(shí)間
res.setHeader('Access-Control-Max-Age', 6)
// OPTIONS請(qǐng)求不做任何處理
if (req.method === 'OPTIONS') {
 res.end()
}
// 定義后臺(tái)返回的內(nèi)容
app.put('/getData', function(req, res) {
 console.log(req.headers)
 res.end('我不愛(ài)你')
})

// index.html
let xhr = new XMLHttpRequest()
document.cookie = 'name=xiamen' // cookie不能跨域
xhr.withCredentials = true // 前端設(shè)置是否帶cookie
xhr.open('PUT', 'http://localhost:4000/getData', true)
xhr.setRequestHeader('name', 'xiamen')
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
 if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
  console.log(xhr.response)
  //得到響應(yīng)頭，后臺(tái)需設(shè)置Access-Control-Expose-Headers
  console.log(xhr.getResponseHeader('name'))
 }
 }
}
xhr.send()

//server1.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()
let whitList = ['http://localhost:3000'] //設(shè)置白名單
app.use(function(req, res, next) {
 let origin = req.headers.origin
 if (whitList.includes(origin)) {
 // 設(shè)置哪個(gè)源可以訪問(wèn)我
 res.setHeader('Access-Control-Allow-Origin', origin)
 // 允許攜帶哪個(gè)頭訪問(wèn)我
 res.setHeader('Access-Control-Allow-Headers', 'name')
 // 允許哪個(gè)方法訪問(wèn)我
 res.setHeader('Access-Control-Allow-Methods', 'PUT')
 // 允許攜帶cookie
 res.setHeader('Access-Control-Allow-Credentials', true)
 // 預(yù)檢的存活時(shí)間
 res.setHeader('Access-Control-Max-Age', 6)
 // 允許返回的頭
 res.setHeader('Access-Control-Expose-Headers', 'name')
 if (req.method === 'OPTIONS') {
  res.end() // OPTIONS請(qǐng)求不做任何處理
 }
 }
 next()
})
app.put('/getData', function(req, res) {
 console.log(req.headers)
 res.setHeader('name', 'jw') //返回一個(gè)響應(yīng)頭，后臺(tái)需設(shè)置
 res.end('我不愛(ài)你')
})
app.get('/getData', function(req, res) {
 console.log(req.headers)
 res.end('我不愛(ài)你')
})
app.use(express.static(__dirname))
app.listen(4000)

// a.html
 <iframe src="http://localhost:4000/b.html" frameborder="0" id="frame" onload="load()"></iframe//等它加載完觸發(fā)一個(gè)事件
 //內(nèi)嵌在http://localhost:3000/a.html
 <script>
  function load() {
  let frame = document.getElementById('frame')
  frame.contentWindow.postMessage('我愛(ài)你', 'http://localhost:4000') //發(fā)送數(shù)據(jù)
  window.onmessage = function(e) { //接受返回?cái)?shù)據(jù)
   console.log(e.data) //我不愛(ài)你
  }
  }
 </script>

// b.html
 window.onmessage = function(e) {
 console.log(e.data) //我愛(ài)你
 e.source.postMessage('我不愛(ài)你', e.origin)
 }

// socket.html
<script>
 let socket = new WebSocket('ws://localhost:3000');
 socket.onopen = function () {
  socket.send('我愛(ài)你');//向服務(wù)器發(fā)送數(shù)據(jù)
 }
 socket.onmessage = function (e) {
  console.log(e.data);//接收服務(wù)器返回的數(shù)據(jù)
 }
</script>

// server.js
let express = require('express');
let app = express();
let WebSocket = require('ws');//記得安裝ws
let wss = new WebSocket.Server({port:3000});
wss.on('connection',function(ws) {
 ws.on('message', function (data) {
 console.log(data);
 ws.send('我不愛(ài)你')
 });
})

// index.html(http://127.0.0.1:5500)
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
 <script>
  $.ajax({
  url: 'http://localhost:3000',
  type: 'post',
  data: { name: 'xiamen', password: '123456' },
  contentType: 'application/json;charset=utf-8',
  success: function(result) {
   console.log(result) // {"title":"fontend","password":"123456"}
  },
  error: function(msg) {
   console.log(msg)
  }
  })
  </script>

// server1.js 代理服務(wù)器(http://localhost:3000)
const http = require('http')
// 第一步：接受客戶端請(qǐng)求
const server = http.createServer((request, response) ={
 // 代理服務(wù)器，直接和瀏覽器直接交互，需要設(shè)置CORS 的首部字段
 response.writeHead(200, {
 'Access-Control-Allow-Origin': '*',
 'Access-Control-Allow-Methods': '*',
 'Access-Control-Allow-Headers': 'Content-Type'
 })
 // 第二步：將請(qǐng)求轉(zhuǎn)發(fā)給服務(wù)器
 const proxyRequest = http
 .request(
  {
  host: '127.0.0.1',
  port: 4000,
  url: '/',
  method: request.method,
  headers: request.headers
  },
  serverResponse ={
  // 第三步：收到服務(wù)器的響應(yīng)
  var body = ''
  serverResponse.on('data', chunk ={
   body += chunk
  })
  serverResponse.on('end', () ={
   console.log('The data is ' + body)
   // 第四步：將響應(yīng)結(jié)果轉(zhuǎn)發(fā)給瀏覽器
   response.end(body)
  })
  }
 )
 .end()
})
server.listen(3000, () ={
 console.log('The proxyServer is running at http://localhost:3000')
})

// server2.js(http://localhost:4000)
const http = require('http')
const data = { title: 'fontend', password: '123456' }
const server = http.createServer((request, response) ={
 if (request.url === '/') {
 response.end(JSON.stringify(data))
 }
})
server.listen(4000, () ={
 console.log('The server is running at http://localhost:4000')
})

// proxy服務(wù)器
server {
 listen  80;
 server_name www.domain1.com;
 location / {
  proxy_pass http://www.domain2.com:8080; #反向代理
  proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
  index index.html index.htm;

  # 當(dāng)用webpack-dev-server等中間件代理接口訪問(wèn)nignx時(shí)，此時(shí)無(wú)瀏覽器參與，故沒(méi)有同源限制，下面的跨域配置可不啟用
  add_header Access-Control-Allow-Origin http://www.domain1.com; #當(dāng)前端只跨域不帶cookie時(shí)，可為*
  add_header Access-Control-Allow-Credentials true;
 }
}

// index.html
var xhr = new XMLHttpRequest();
// 前端開(kāi)關(guān)：瀏覽器是否讀寫(xiě)cookie
xhr.withCredentials = true;
// 訪問(wèn)nginx中的代理服務(wù)器
xhr.open('get', 'http://www.domain1.com:81/?user=admin', true);
xhr.send();

// server.js
var http = require('http');
var server = http.createServer();
var qs = require('querystring');
server.on('request', function(req, res) {
 var params = qs.parse(req.url.substring(2));
 // 向前臺(tái)寫(xiě)cookie
 res.writeHead(200, {
  'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly' // HttpOnly:腳本無(wú)法讀取
 });
 res.write(JSON.stringify(params));
 res.end();
});
server.listen('8080');
console.log('Server is running at port 8080...');

 // a.html(http://localhost:3000/b.html)
 <iframe src="http://localhost:4000/c.html" frameborder="0" onload="load()" id="iframe"></iframe>
 <script>
 let first = true
 // onload事件會(huì)觸發(fā)2次，第1次加載跨域頁(yè)，并留存數(shù)據(jù)于window.name
 function load() {
  if(first){
  // 第1次onload(跨域頁(yè))成功后，切換到同域代理頁(yè)面
  let iframe = document.getElementById('iframe');
  iframe.src = 'http://localhost:3000/b.html';
  first = false;
  }else{
  // 第2次onload(同域b.html頁(yè))成功后，讀取同域window.name中數(shù)據(jù)
  console.log(iframe.contentWindow.name);
  }
 }
 </script>

 // c.html(http://localhost:4000/c.html)
 <script>
 window.name = '我不愛(ài)你'
 </script>

 // a.html
 <iframe src="http://localhost:4000/c.html#iloveyou"></iframe>
 <script>
 window.onhashchange = function () { //檢測(cè)hash的變化
  console.log(location.hash);
 }
 </script>

 // b.html
 <script>
 window.parent.parent.location.hash = location.hash
 //b.html將結(jié)果放到a.html的hash值中，b.html可通過(guò)parent.parent訪問(wèn)a.html頁(yè)面
 </script>
 // c.html
 console.log(location.hash);
 let iframe = document.createElement('iframe');
 iframe.src = 'http://localhost:3000/b.html#idontloveyou';
 document.body.appendChild(iframe);
9.document.domain + iframe

// a.html
<body>
 helloa
 <iframe src="http://b.zf1.cn:3000/b.html" frameborder="0" onload="load()" id="frame"></iframe>
 <script>
 document.domain = 'zf1.cn'
 function load() {
  console.log(frame.contentWindow.a);
 }
 </script>
</body>

// b.html
<body>
 hellob
 <script>
  document.domain = 'zf1.cn'
  var a = 100;
 </script>
</body>