jsonp的實現

以前只知道jsonp其實是通過創建一個新的script標簽，然后進行請求數據，因為script的src屬性進行請求，沒有存在跨域這么一說，

因此jsonp的方式也是只能是通過get來進行請求，於是今天再網上看到這么一個做法，覺得可以學習一下。

原生
<script>
    var script = document.createElement('script');
    script.type = 'text/javascript';
 
    // 傳參並指定回調執行函數為onBack
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
    document.head.appendChild(script);
 
    // 回調執行函數
    function onBack(res) {
        alert(JSON.stringify(res));
    }
 </script>
 
jquery
$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 請求方式為jsonp
    jsonpCallback: "onBack",    // 自定義回調函數名
    data: {}
});

vue
this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'onBack'
}).then((res) => {
    console.log(res); 
})

配合的后端node實現,其他服務器語言也可以
const querystring = require('querystring');
const http = require('http');
const server = http.createServer();
server.on('request', function(req, res) {
    var params = qs.parse(req.url.split('?')[1]);
    var fn = params.callback;
 
    // jsonp返回設置
    res.writeHead(200, { 'Content-Type': 'text/javascript' });
    res.write(fn + '(' + JSON.stringify(params) + ')');
 
    res.end();
});
server.listen('8080');