JavaScript 九种跨域方式实现原理

// 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}('我不爱你')`)
})
app.listen(3000)

$.ajax({
url:"http://crossdomain.com/jsonServerResponse",
dataType:"jsonp",
type:"get",//可以省略
jsonpCallback:"show",//->自定义传递给服务器的函数名，而不是使用jQuery自动生成的，可省略
jsonp:"callback",//->把传递函数名的那个形参callback，可省略
success:function (data){
console.log(data);}
});

// 允许哪个方法访问我
res.setHeader('Access-Control-Allow-Methods', 'PUT')
// 预检的存活时间
res.setHeader('Access-Control-Max-Age', 6)
// OPTIONS请求不做任何处理
if (req.method === 'OPTIONS') {
 res.end()
}
// 定义后台返回的内容
app.put('/getData', function(req, res) {
 console.log(req.headers)
 res.end('我不爱你')
})

// index.html
let xhr = new XMLHttpRequest()
document.cookie = 'name=xiamen' // cookie不能跨域
xhr.withCredentials = true // 前端设置是否带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)
  //得到响应头，后台需设置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'] //设置白名单
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)

// a.html
 <iframe src="http://localhost:4000/b.html" frameborder="0" id="frame" onload="load()"></iframe//等它加载完触发一个事件
 //内嵌在http://localhost:3000/a.html
 <script>
  function load() {
  let frame = document.getElementById('frame')
  frame.contentWindow.postMessage('我爱你', 'http://localhost:4000') //发送数据
  window.onmessage = function(e) { //接受返回数据
   console.log(e.data) //我不爱你
  }
  }
 </script>

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

// socket.html
<script>
 let socket = new WebSocket('ws://localhost:3000');
 socket.onopen = function () {
  socket.send('我爱你');//向服务器发送数据
 }
 socket.onmessage = function (e) {
  console.log(e.data);//接收服务器返回的数据
 }
</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('我不爱你')
 });
})

// 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 代理服务器(http://localhost:3000)
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'
 })
 // 第二步：将请求转发给服务器
 const proxyRequest = http
 .request(
  {
  host: '127.0.0.1',
  port: 4000,
  url: '/',
  method: request.method,
  headers: request.headers
  },
  serverResponse ={
  // 第三步：收到服务器的响应
  var body = ''
  serverResponse.on('data', chunk ={
   body += chunk
  })
  serverResponse.on('end', () ={
   console.log('The data is ' + body)
   // 第四步：将响应结果转发给浏览器
   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服务器
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;

  # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
  add_header Access-Control-Allow-Origin http://www.domain1.com; #当前端只跨域不带cookie时，可为*
  add_header Access-Control-Allow-Credentials true;
 }
}

// index.html
var xhr = new XMLHttpRequest();
// 前端开关：浏览器是否读写cookie
xhr.withCredentials = true;
// 访问nginx中的代理服务器
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));
 // 向前台写cookie
 res.writeHead(200, {
  'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly' // HttpOnly:脚本无法读取
 });
 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事件会触发2次，第1次加载跨域页，并留存数据于window.name
 function load() {
  if(first){
  // 第1次onload(跨域页)成功后，切换到同域代理页面
  let iframe = document.getElementById('iframe');
  iframe.src = 'http://localhost:3000/b.html';
  first = false;
  }else{
  // 第2次onload(同域b.html页)成功后，读取同域window.name中数据
  console.log(iframe.contentWindow.name);
  }
 }
 </script>

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

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

 // b.html
 <script>
 window.parent.parent.location.hash = location.hash
 //b.html将结果放到a.html的hash值中，b.html可通过parent.parent访问a.html页面
 </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>