如何實(shí)現(xiàn)跨域?說(shuō)一下JSONP實(shí)現(xiàn)原理?

　　跨域指的是在一個(gè)域名下的網(wǎng)頁(yè)去請(qǐng)求另一個(gè)域名下的資源。同源策略是瀏覽器的一種安全限制，如果不同源，就不能直接進(jìn)行通信。但是在實(shí)際開(kāi)發(fā)中，經(jīng)常需要跨域請(qǐng)求資源，這時(shí)就需要采取一些方法來(lái)解決這個(gè)問(wèn)題。

　　常見(jiàn)的跨域解決方案包括：

　　1.CORS(Cross-Origin Resource Sharing)跨域資源共享：這是一種官方推薦的跨域解決方案，需要在服務(wù)端設(shè)置響應(yīng)頭，允許客戶(hù)端跨域請(qǐng)求資源。

　　2.JSONP(JSON with Padding)跨域請(qǐng)求：這是一種兼容性比較好的跨域解決方案，它的原理是利用 script 標(biāo)簽沒(méi)有跨域限制的特性，通過(guò)動(dòng)態(tài)創(chuàng)建 script 標(biāo)簽，再將請(qǐng)求的數(shù)據(jù)作為回調(diào)函數(shù)的參數(shù)返回給客戶(hù)端。

　　JSONP的實(shí)現(xiàn)原理是：客戶(hù)端通過(guò)動(dòng)態(tài)創(chuàng)建 script 標(biāo)簽，將需要跨域請(qǐng)求的 URL 作為 script 標(biāo)簽的 src 屬性值，并在 URL 中攜帶一個(gè)回調(diào)函數(shù)的名稱(chēng)(一般為 callback 或 cb)，服務(wù)端收到請(qǐng)求后，根據(jù)參數(shù)進(jìn)行處理，并將處理結(jié)果作為一個(gè)參數(shù)傳遞給客戶(hù)端指定的回調(diào)函數(shù)，最后返回給客戶(hù)端的內(nèi)容為回調(diào)函數(shù)的調(diào)用，并將處理結(jié)果作為參數(shù)傳遞進(jìn)去，這樣客戶(hù)端就可以獲取到跨域請(qǐng)求的數(shù)據(jù)了。

　　下面是一個(gè)簡(jiǎn)單的 JSONP 實(shí)現(xiàn)示例：

　　客戶(hù)端代碼：

function jsonp(url, callback) {
  const script = document.createElement('script');
  script.src = url + '?callback=' + callback;
  document.body.appendChild(script);
}

function handleData(data) {
  console.log(data);
}

jsonp('http://example.com/api/data', 'handleData');

　　服務(wù)端代碼：

const http = require('http');

http.createServer((req, res) => {
  const callback = req.query.callback;
  const data = { name: 'ChatGPT', age: 1 };
  const result = callback + '(' + JSON.stringify(data) + ')';
  res.end(result);
}).listen(3000);

　　在這個(gè)例子中，客戶(hù)端通過(guò)調(diào)用jsonp函數(shù)發(fā)送跨域請(qǐng)求，服務(wù)端接收到請(qǐng)求后，根據(jù)客戶(hù)端傳遞的回調(diào)函數(shù)名稱(chēng)和需要返回的數(shù)據(jù)，生成一個(gè)回調(diào)函數(shù)的調(diào)用，并返回給客戶(hù)端?？蛻?hù)端接收到響應(yīng)后，執(zhí)行指定的回調(diào)函數(shù)，從而獲取到跨域請(qǐng)求的數(shù)據(jù)。