JSONP

時間 2019-12-01

標籤 jsonp 欄目 JSON 简体版

原文原文鏈接

前端傳一個回調函數，後端接收回調函數是並把數據當作參數一塊兒返回，實際的執行是經過script標籤起做用的（script標籤會自動下載資源後並當作JS執行），因此控制執行能夠經過動態建立script標籤的方式。javascript

index.htmlhtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="btn1">請求</button>
    <!-- <script>
    function test(data) {
        alert(data.name);
    }
    </script>
    <script src="http://127.0.0.1:8080/jsonp?callback=test"></script> -->
    <script>
    function addScriptTag(src) {
        var script = document.createElement("script");
        script.setAttribute('type', 'text/javascript');
        script.src = src;
        document.body.appendChild(script);
    }
    var oBtn = document.querySelector("#btn1");
    oBtn.onclick = function() {
        addScriptTag("http://127.0.0.1:8080/jsonp?callback=hello")
    };
    function hello(data) {
        console.log(data);
    }
    </script>
</body>
</html>

server.js前端

var http = require('http');
var url = require('url');

var querystring = require('querystring');

var server = http.createServer();

server.on('request', function (req, res) {
    var urlPath = url.parse(req.url).pathname;
    var qs = querystring.parse(req.url.split('?')[1]);
    // http://localhost:8080/jsonp?callback=test // { callback: 'test' }
    if (urlPath === "/jsonp" && qs.callback) {
        res.writeHead(200, {
            'Content-Type': 'text/plain;charset=utf-8'
        });
        var data = {
            "name": "Monkey"
        };
        data = JSON.stringify(data);

        var callback = qs.callback + '(' + data + ');';

        res.end(callback);
    } else {
        res.writeHead(200, {
            'Content-Type': 'text/html;charset=utf-8'
        });
        res.end('Hello World\n');
    }
});

server.listen('8080');

CORS：當使用XMLHttpRequest發送請求時，瀏覽器發現該請求不符合同源策略，會自動給該請求加一個請求頭：Origin:當前地址，後臺進行一系列處理，若是肯定接收請求就在返回結果中加入一個響應頭：Access-Control-Allow-Origin:被容許地址...因此CORS的表象是讓你以爲和同源的AJAX請求沒什麼區別，代碼徹底同樣，都是後端進行的處理，服務器設置接收誰就是誰。java

不跨域這樣獲取當前頁面中iframe中的內容：window.frames[0].document徹底沒有問題。json

跨域iframe：當前頁面地址a.blog.com，iframe鏈接的地址b.blog.com，能夠採用降域的方式：document.domain="blog.com"，注意這句話要在當前頁面和iframe鏈入的頁面中都要寫，兩方都進行降域最後才能同域。後端

主域（一級域名）相同，子域名不一樣，可經過降域的方式，例如：a.blog.com和b.blog.com，缺點是主域名相同才能使用此方法。跨域

跨域iframe：雖然不能window.frames[0].document，可是能夠window.frames[0].postMessage(str, "*")，*號表明全部域，此頁面再window.addEventListener('message', function(e) { e.data })，這裏的e.data就是發送的str瀏覽器

ifame鏈接的頁面的操做：window.addEventListener('message', function(e) { e.data })，window.parent.postMessage(str, "*")服務器

若是是不一樣域名，可經過PostMessage的方法。app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。