跨域方法

Copy 
1// index.html
2function jsonp({ url, params, callback }) {
3  return new Promise((resolve, reject) => {
4    let script = document.createElement("script");
5    window[callback] = function (data) {
6      resolve(data);
7      document.body.removeChild(script);
8    };
9    params = { ...params, callback }; // wd=b&callback=show
10    let arrs = [];
11    for (let key in params) {
12      arrs.push(`${key}=${params[key]}`);
13    }
14    script.src = `${url}?${arrs.join("&")}`;
15    document.body.appendChild(script);
16  });
17}
18jsonp({
19  url: "http://localhost:3000/say",
20  params: { wd: "Iloveyou" },
21  callback: "show",
22}).then((data) => {
23  console.log(data);
24});

Copy 
1// server.js
2let express = require("express");
3let app = express();
4app.get("/say", function (req, res) {
5  let { wd, callback } = req.query;
6  console.log(wd); // Iloveyou
7  console.log(callback); // show
8  res.end(`${callback}('我不爱你')`);
9});
10app.listen(3000);

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

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

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

Copy 
1// socket.html
2<script>
3    let socket = new WebSocket('ws://localhost:3000');
4    socket.onopen = function () {
5      socket.send('我爱你');//向服务器发送数据
6    }
7    socket.onmessage = function (e) {
8      console.log(e.data);//接收服务器返回的数据
9    }
10</script>

Copy 
1// server.js
2let express = require('express');
3let app = express();
4let WebSocket = require('ws');//记得安装ws
5let wss = new WebSocket.Server({port:3000});
6wss.on('connection',function(ws) {
7  ws.on('message', function (data) {
8    console.log(data);
9    ws.send('我不爱你')
10  });
11})

Copy 
1// index.html(http://127.0.0.1:5500)
2<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
3<script>
4  $.ajax({
5    url: 'http://localhost:3000',
6    type: 'post',
7    data: { name: 'xiamen', password: '123456' },
8    contentType: 'application/json;charset=utf-8',
9    success: function(result) {
10      console.log(result) // {"title":"fontend","password":"123456"}
11    },
12    error: function(msg) {
13      console.log(msg)
14    }
15  })
16</script>

Copy 
1// server1.js 代理服务器(http://localhost:3000)
2const http = require('http')
3// 第一步：接受客户端请求
4const server = http.createServer((request, response) => {
5  // 代理服务器，直接和浏览器直接交互，需要设置CORS 的首部字段
6  response.writeHead(200, {
7    'Access-Control-Allow-Origin': '*',
8    'Access-Control-Allow-Methods': '*',
9    'Access-Control-Allow-Headers': 'Content-Type'
10  })
11  // 第二步：将请求转发给服务器
12  const proxyRequest = http
13    .request(
14      {
15        host: '127.0.0.1',
16        port: 4000,
17        url: '/',
18        method: request.method,
19        headers: request.headers
20      },
21      serverResponse => {
22        // 第三步：收到服务器的响应
23        var body = ''
24        serverResponse.on('data', chunk => {
25          body += chunk
26        })
27        serverResponse.on('end', () => {
28          console.log('The data is ' + body)
29          // 第四步：将响应结果转发给浏览器
30          response.end(body)
31        })
32      }
33    )
34    .end()
35})
36server.listen(3000, () => {
37  console.log('The proxyServer is running at http://localhost:3000')
38})

Copy 
1// server2.js(http://localhost:4000)
2const http = require('http')
3const data = { title: 'fontend', password: '123456' }
4const server = http.createServer((request, response) => {
5  if (request.url === '/') {
6    response.end(JSON.stringify(data))
7  }
8})
9server.listen(4000, () => {
10  console.log('The server is running at http://localhost:4000')
11})

Copy 
1// proxy服务器
2server {
3    listen       81;
4    server_name  www.domain1.com;
5    location / {
6        proxy_pass   http://www.domain2.com:8080;  #反向代理
7        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
8        index  index.html index.htm;
9
10        # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
11        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*
12        add_header Access-Control-Allow-Credentials true;
13    }
14}

Copy 
1// index.html
2var xhr = new XMLHttpRequest();
3// 前端开关：浏览器是否读写cookie
4xhr.withCredentials = true;
5// 访问nginx中的代理服务器
6xhr.open('get', 'http://www.domain1.com:81/?user=admin', true);
7xhr.send();

Copy 
1// server.js
2var http = require('http');
3var server = http.createServer();
4var qs = require('querystring');
5server.on('request', function(req, res) {
6    var params = qs.parse(req.url.substring(2));
7    // 向前台写cookie
8    res.writeHead(200, {
9        'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'   // HttpOnly:脚本无法读取
10    });
11    res.write(JSON.stringify(params));
12    res.end();
13});
14server.listen('8080');
15console.log('Server is running at port 8080...');

Copy 
1// a.html(http://localhost:3000/b.html)
2  <iframe src="http://localhost:4000/c.html" frameborder="0" onload="load()" id="iframe"></iframe>
3  <script>
4    let first = true
5    // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name
6    function load() {
7      if(first){
8      // 第1次onload(跨域页)成功后，切换到同域代理页面
9        let iframe = document.getElementById('iframe');
10        iframe.src = 'http://localhost:3000/b.html';
11        first = false;
12      }else{
13      // 第2次onload(同域b.html页)成功后，读取同域window.name中数据
14        console.log(iframe.contentWindow.name);
15      }
16    }
17  </script>

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

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

Copy 
1// b.html
2  <script>
3    window.parent.parent.location.hash = location.hash 
4    //b.html将结果放到a.html的hash值中，b.html可通过parent.parent访问a.html页面
5  </script>

Copy 
1// c.html
2 console.log(location.hash);
3  let iframe = document.createElement('iframe');
4  iframe.src = 'http://localhost:3000/b.html#idontloveyou';
5  document.body.appendChild(iframe);

Copy 
1// a.html
2<body>
3 helloa
4  <iframe src="http://b.zf1.cn:3000/b.html" frameborder="0" onload="load()" id="frame"></iframe>
5  <script>
6    document.domain = 'zf1.cn'
7    function load() {
8      console.log(frame.contentWindow.a);
9    }
10  </script>
11</body>

Copy 
1// b.html
2<body>
3   hellob
4   <script>
5     document.domain = 'zf1.cn'
6     var a = 100;
7   </script>
8</body>