浅析JavaScript如何解决跨域问题并手写一个jsonp

res.setHeader('Access-Control-Allow-Origin', '*');

// 客户端
function handleResponse(data) {
  console.log(data);
}
const script = document.createElement('script');
script.src = 'http://www.domain.com?callback=handleResponse';
document.body.insertBefore(script, document.body.firstChild);

// 服务器端
res.end(`handleResponse(${JSON.stringify(data)})`);

// Node.js 服务器端
const request = require('request');
app.get('/proxy', function(req, res) {
  const url = 'http://www.domain.com' + req.url;
  req.pipe(request(url)).pipe(res);
});

// 页面 A
window.postMessage('message', 'http://www.domain-b.com');

// 页面 B
window.addEventListener('message', function(event) {
  if (event.origin !== 'http://www.domain-a.com') return;
  console.log(event.data);
}, false);

// 客户端
function jsonp(url, callback) {
    // 创建 script 标签并加入到页面中
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 创建一个全局函数，并将函数名传给服务器请求
    var callbackName = 'jsonp_callback_' + Math.random().toString().replace('.', '');
    window[callbackName] = function(data) {
        // 在这个全局函数中处理服务器返回的数据
        callback(data);

        // 数据处理完后删除此函数及 script 标签
        delete window[callbackName];
        document.body.removeChild(script);
    }

    // 设置请求 URL
    script.src = url + '?callback=' + callbackName;
    document.body.appendChild(script);
}

// 使用 JSONP
jsonp('http://www.example.com', function(data) {
    console.log(data);
});