// 1.封裝一個jsonp函數(shù);
jsonp({
    // method: 'GET',// 所有的jsonp請求都是get請求，所以這個屬性可以不寫了
    // data: , // 寫了以后太繁瑣，取消
    url: 'http://www.localhost:3006/api/jsonp',
    success: function (res) {
        console.log(res)
    }
})
 
// 封裝
function jsonp(obj) {
    // 1.創(chuàng)建一個script標簽;   2.改變src    3.給函數(shù)起名字，定義為全局函數(shù)；
    var script = document.createElement("script"); // 不要用innerHTML, 他不會自動發(fā)送請求
    // 3.給函數(shù)起名字，定義為全局函數(shù)；
    var fnName = "haha_123123";
    // window.aaa就是把aaa設置為全局變量！
    window[fnName] = obj.success;
    // 2.改變src,添加到head中
    script.src = obj.url + "?callback=" + fnName;
    // 把script標簽添加到head標簽中，就會發(fā)送src的請求了
    document.head.appendChild(script);
    // 代碼執(zhí)行完畢，把script標簽刪除
    script.onload = function () {
        document.head.removeChild(script);
        window[fnName] = undefined;
    }
}

app.get("/api/jsonp", (req, res) => {
    // 獲取函數(shù)名,設置對象,發(fā)送給客戶端
    const fnName = req.query.callback;
    // 定義發(fā)送給客戶端的對象轉換為json字符串
    var objStr = JSON.stringify({
        name: '張三',
        age: 18
    });
    // 字符串類型的執(zhí)行函數(shù)
    res.send(`${fnName}(${objStr})`);
});

// 第一步：在vue項目中安裝上vue-jsonp
npm i vue-jsonp --save

// 第二步：在vue項目中main.js導入
import { VueJsonp } from 'vue-jsonp'
Vue.use(VueJsonp)


// 使用示例：
this.$jsonp(url, {
    id: '1',
    output: "jsonp"
}).then(res => {
    console.log('res', res)
}).catch(err => {
    console.log(err)
})

        Accept
        Accept-Language
        Content-Language
        Last-Event-ID
        Content-Type 對應的值是以下三個中的任意一個
                                application/x-www-form-urlencoded
                                multipart/form-data
                                text/plain

response.setHeater('Access-Control-Allow-Origin',' http://XXX.cn || * ||  ip地址  '); 

// 提示OPTIONS預檢時，后端需要設置的兩個常用自定義頭
response.setHeater('Access-Control-Allow-Headers','Content-Type,X-Requested-With'); 

response.setHeater('Access-Control-Allow-Method','PUT'); 

// 允許前端帶認證cookie：啟用此項后，上面的域名不能為'*'，必須指定具體的域名，否則瀏覽器會提示
response.setHeader("Access-Control-Allow-Credentials", "true");

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>

<script> 
    document.domain = 'domain.com';
    var user = 'admin'; 
</script>

<script> 
    document.domain = 'domain.com';
    // 獲取父窗口中變量
    alert('get js data from parent ---> ' + window.parent.user); 
</script>

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>

<script> 
    var iframe = document.getElementById('iframe');
    // 向b.html傳hash值
    setTimeout(function() {
        iframe.src = iframe.src + '#user=admin';
    }, 1000);

    // 開放給同域c.html的回調方法
    function onCallback(res) {
        alert('data from c.html ---> ' + res);
    } 
</script>

<iframe id="iframe" src="http://www.domain1.com/c.html" style="display:none;"></iframe>

<script> 
    var iframe = document.getElementById('iframe');

    // 監(jiān)聽a.html傳來的hash值，再傳給c.html
    window.onhashchange = function () {
        iframe.src = iframe.src + location.hash;
    }; 
</script>

<script> 
    // 監(jiān)聽b.html傳來的hash值
    window.onhashchange = function () {
        // 再通過操作同域a.html的js回調，將結果傳回
        window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));
    }; 
</script>

var proxy = function(url, callback) {
    var state = 0;
    var iframe = document.createElement('iframe');
    
    // 加載跨域頁面
    iframe.src = url;

    // onload事件會觸發(fā)2次，第1次加載跨域頁，并留存數(shù)據(jù)于window.name
    iframe.onload = function() {
        if (state === 1) {
            // 第2次onload(同域proxy頁)成功后，讀取同域window.name中數(shù)據(jù)
            callback(iframe.contentWindow.name);
            destoryFrame();

        } else if (state === 0) {
            // 第1次onload(跨域頁)成功后，切換到同域代理頁面
            iframe.contentWindow.location = 'http://www.domain1.com/proxy.html';
            state = 1;
        }
    };

    document.body.appendChild(iframe);

    // 獲取數(shù)據(jù)以后銷毀這個iframe，釋放內存；這也保證了安全（不被其他域frame js訪問）
    function destoryFrame() {
        iframe.contentWindow.document.write('');
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
    }
}



// 請求跨域b頁面數(shù)據(jù)
proxy('http://www.domain2.com/b.html', function(data){
    alert(data);
});

<script> window.name = 'This is domain2 data!'; </script>

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>

<script> 
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
        name: 'aym'
    };

    // 向domain2傳送跨域數(shù)據(jù)
    iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');


    // 接受domain2返回數(shù)據(jù)
    window.addEventListener('message', function(e) {
        alert('data from domain2 ---> ' + e.data);
    }, false); 
</script>

<script> 
    // 接收domain1的數(shù)據(jù)
    window.addEventListener('message', function(e) {
        alert('data from domain1 ---> ' + e.data);
        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;

            // 處理后再發(fā)回domain1
            window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
        }
    }, false); 
</script>

location / {
    add_header Access-Control-Allow-Origin *;
}

#proxy服務器
server {
    listen 81;
    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;
    }
}

var xhr = new XMLHttpRequest();

// 前端開關：瀏覽器是否讀寫cookie
xhr.withCredentials = true;

// 訪問nginx中的代理服務器
xhr.open('get', 'http://www.domain1.com:81/?user=admin', true);
xhr.send();

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...');

var xhr = new XMLHttpRequest();

// 前端開關：瀏覽器是否讀寫cookie
xhr.withCredentials = true;

// 訪問http-proxy-middleware代理服務器
xhr.open('get', 'http://www.domain1.com:3000/login?user=admin', true);
xhr.send();

var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();

app.use('/', proxy({
// 代理跨域目標接口
target: 'http://www.domain2.com:8080',
changeOrigin: true,

// 修改響應頭信息，實現(xiàn)跨域并允許帶cookie
onProxyRes: function(proxyRes, req, res) {
    res.header('Access-Control-Allow-Origin', 'http://www.domain1.com');
    res.header('Access-Control-Allow-Credentials', 'true');
},

// 修改響應信息中的cookie域名
cookieDomainRewrite: 'www.domain1.com'  // 可以為false，表示不修改
}));

app.listen(3000);
console.log('Proxy server is listen at port 3000...');

//vue.config.js

module.exports = {
entry: {},
module: {},
...

devServer: {
    proxy: {
      // 如果請求地址以/api打頭,就出觸發(fā)代理機制
      // http://localhost:8080/api/login -> http://localhost:3000/api/login
      '/api': { // 攔截以 /api 開頭的url接口
        target: 'http://localhost:3000', //目標接口域名  路徑：http://localhost:3000/api
        changeOrigin: true, //是否跨域
        ws: true, //如果要代理 websockets，配置這個參數(shù)
        secure: false, // 如果是https接口，需要配置這個參數(shù)
        //     // 標識替換
        //     // 原請求地址為 /api/getData 將'/api'替換''時，
        //     // 代理后的請求地址為： http://xxx.xxx.xxx/getData
        //     // 若替換為'/other',則代理后的請求地址為 http://xxx.xxx.xxx/other/getData 
        pathRewrite: { // 標識替換
            '^/api': '/'   //重寫接口 后臺接口指向不統(tǒng)一  所以指向所有/   路徑：http://localhost:3000/
        //       '^/api': '/api/mock'
        }
    }
  },

}

var socket = new WebSocket("ws://example.com/socketserver");
 
socket.onopen = function(event) {
  socket.send("Hello server!");
};
 
socket.onmessage = function(event) {
  console.log("Received message from server: " + event.data);
};
 
socket.onerror = function(event) {
  console.log("WebSocket error: " + event.error);
};
 
socket.onclose = function(event) {
  console.log("WebSocket connection closed with code " + event.code);
};

<template>
  <div>
    <input v-model="message" @keyup.enter="sendMessage">
    <button @click="sendMessage">Send</button>
    <ul>
      <li v-for="msg in messages">{{ msg }}</li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: '',
      messages: [],
      socket: null
    }
  },
  created() {
    this.socket = new WebSocket('ws://localhost:3000')
    // 監(jiān)聽服務器端響應處理函數(shù)
    this.socket.addEventListener('message', this.handleMessage)
    /*
    this.$once('hook:beforeDestroy',() => {
        // 關閉連接
        this.socket.close()
    })
    */
  },
  beforeDestroy() {
    // 關閉連接
    this.socket.close()
  },
  methods: {
    sendMessage() {
      // 向服務器端發(fā)送消息
      this.socket.send(this.message)
      this.message = ''
    },
    handleMessage(event) {
      this.messages.push(event.data)
    }
  }
}
</script>

<script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>

<script> 

// var socket = io('http://www.domain2.com:8080');
// 創(chuàng)建Socket.IO實例，建立連接
var socket= new io.Socket('localhost',{
    port: 8080
});

socket.connect();

// 連接成功處理
socket.on('connect', function() {
    console.log('Client has connected to the server!');
});
// 監(jiān)聽服務端消息
socket.on('message', function(msg) {
    console.log('data from server: ---> ' + msg);
});

// 監(jiān)聽服務端關閉
socket.on('disconnect', function() { 
    console.log('Server socket has closed.'); 
});


document.getElementsByTagName('input')[0].onblur = function() {
    // 通過Socket發(fā)送一條消息到服務器
    socket.send(this.value);
}; 
</script>

var http = require('http');
var socket = require('socket.io');

// 啟http服務
var server = http.createServer(function(req, res) {
res.writeHead(200, {
'Content-type': 'text/html'
});
res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');

// 監(jiān)聽socket連接
socket.listen(server).on('connection', function(client) {
// 接收信息
client.on('message', function(msg) {
client.send('hello：' + msg);
console.log('data from client: ---> ' + msg);
});

// 斷開處理
client.on('disconnect', function() {
    console.log('Client socket has closed.'); 
});