淺析JavaScript如何解決跨域問題并手寫一個jsonp

更新時間：2024年03月20日 11:17:36 作者：和小王學(xué)前端

跨域是指瀏覽器為了安全性,實施的同源策略,同源策略要求,只有協(xié)議、域名和端口號完全相同的網(wǎng)頁,才能共享資源,本文整理了一些常用的跨域解決方法,希望對大家有所幫助

跨域是指瀏覽器為了安全性，實施的同源策略。同源策略要求，只有協(xié)議、域名和端口號完全相同的網(wǎng)頁，才能共享資源。如果不滿足這些條件，就會產(chǎn)生“跨域”。

解決跨域的常見方法有以下幾種：

1.CORS（跨源資源共享） ：服務(wù)器設(shè)置相應(yīng)的 HTTP 頭部 Access-Control-Allow-Origin。這是最常用的跨域解決方案。

// 服務(wù)器端設(shè)置 HTTP 頭部

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

2.JSONP（JSON with Padding） ：通過動態(tài)創(chuàng)建 <script> 標(biāo)簽來調(diào)用服務(wù)器提供的回調(diào)函數(shù)。這種方法只能用于 GET 請求。

// 客戶端
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);

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

3.代理服務(wù)器：通過后端服務(wù)器轉(zhuǎn)發(fā)請求和響應(yīng)，避免瀏覽器直接請求不同源的資源。

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

4.PostMessage：HTML5 引入的一種新的 API，可以實現(xiàn)跨源通信。

// 頁面 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);

5.WebSockets：WebSockets 是一種通信協(xié)議，由于其是雙向通信，且在建立連接后可以直接發(fā)送數(shù)據(jù)，因此不受同源策略限制。

以上就是解決跨域問題的常見方法，需要根據(jù)具體的場景和需求來選擇合適的方法。

JSONP（JSON with Padding）是一種跨域數(shù)據(jù)交互的方法。它的基本思想是，網(wǎng)頁通過添加一個 <script> 標(biāo)簽，向服務(wù)器請求 JSON 數(shù)據(jù)，這種做法不受同源策略限制；服務(wù)器收到請求后，將數(shù)據(jù)放在一個指定名字的 JavaScript 函數(shù)中返回。

以下是一個 JSONP 的基本實現(xiàn)：

// 客戶端
function jsonp(url, callback) {
    // 創(chuàng)建 script 標(biāo)簽并加入到頁面中
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 創(chuàng)建一個全局函數(shù)，并將函數(shù)名傳給服務(wù)器請求
    var callbackName = 'jsonp_callback_' + Math.random().toString().replace('.', '');
    window[callbackName] = function(data) {
        // 在這個全局函數(shù)中處理服務(wù)器返回的數(shù)據(jù)
        callback(data);

        // 數(shù)據(jù)處理完后刪除此函數(shù)及 script 標(biāo)簽
        delete window[callbackName];
        document.body.removeChild(script);
    }

    // 設(shè)置請求 URL
    script.src = url + '?callback=' + callbackName;
    document.body.appendChild(script);
}

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

在這個例子中，客戶端創(chuàng)建了一個全局函數(shù)，并將函數(shù)名作為參數(shù)傳給服務(wù)器。服務(wù)器將數(shù)據(jù)放在這個函數(shù)中返回?？蛻舳说娜趾瘮?shù)收到數(shù)據(jù)后進(jìn)行處理。

請注意，JSONP 只能用于 GET 請求，不能發(fā)送 POST 或其他類型的 HTTP 請求。而且，由于它是通過插入 <script> 標(biāo)簽來工作的，所以如果服務(wù)器被惡意利用，可能會有安全問題。

到此這篇關(guān)于淺析JavaScript如何解決跨域問題并手寫一個jsonp的文章就介紹到這了,更多相關(guān)JavaScript跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: