良苦用心啊!我把7大跨域解決方法原理畫成10張圖,做成圖解!

Sunshine_Lin 發表於 2021-12-05

前言

大家好,我是林三心。用最通俗易懂的話講最難的知識點是我的座右銘,基礎是進階的前提是我的初衷。

我們們做前端的,平時跟後端對接介面那是必須的事情,但是可能很多同學忽略了一個對接過程中可能會發生的問題——跨域,那跨域到底是啥呢?為什麼會跨域呢?又怎麼才能解決呢?

截圖2021-10-01 上午7.16.06.png

為什麼跨域?

image.png

為什麼會出現跨域問題呢?那就不得不講瀏覽器的同源策略了,它規定了協議號-域名-埠號這三者必須都相同才符合同源策略

截圖2021-10-01 上午8.50.11.png

如有有一個不相同,就會出現跨域問題,不符合同源策略導致的後果有

  • 1、LocalStorge、SessionStorge、Cookie等瀏覽器記憶體無法跨域訪問
  • 2、DOM節點無法跨域操作
  • 3、Ajax請求無法跨域請求

注意點:一個IP是可以註冊多個不同域名的,也就是多個域名可能指向同一個IP,即使是這樣,他們也不符合同源策略

截圖2021-10-01 上午9.02.55.png

跨域的時機?

跨域發生在什麼時候呢?我考過很多位同學,得到了兩種答案

  • 1、請求一發出就被瀏覽器的跨域報錯攔下來了(大多數人回答)
  • 2、請求發出去到後端,後端返回資料,在瀏覽器接收後端資料時被瀏覽器的跨域報錯攔下來

那到底是哪種呢?我們可以驗證下,我們們先npm i nodemon -g,然後建立一個index.js,然後nodemon index起一個node服務

// index.js  http://127.0.0.1:8000

const http = require('http');

const port = 8000;

http.createServer(function (req, res) {
    const { query } = urllib.parse(req.url, true);
    console.log(query.name)
    console.log('到後端嘍')
    res.end(JSON.stringify('林三心'));
}).listen(port, function () {
    console.log('server is listening on port ' + port);
})

再建立一個index.html,用來寫前端的請求程式碼,我們們就寫一個簡單的AJAX請求

// index.html  http://127.0.0.1:5500/index.html
<script>
    //步驟一:建立非同步物件
    var ajax = new XMLHttpRequest();
    //步驟二:設定請求的url引數,引數一是請求的型別,引數二是請求的url,可以帶引數
    ajax.open('get', 'http://127.0.0.1:8000?name=前端過來的林三心');
    //步驟三:傳送請求
    ajax.send();
    //步驟四:註冊事件 onreadystatechange 狀態改變就會呼叫
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            //步驟五 如果能夠進到這個判斷 說明 資料 完美的回來了,並且請求的頁面是存在的
            console.log(ajax.responseText);//輸入相應的內容
        }
    }

</script>

截圖2021-10-01 下午1.37.01.png

最終,前端確實是跨域報錯了。但這不是結果,我們要想知道是哪一個答案,關鍵在於看後端的node服務那裡有沒有輸出,就一目瞭然了。所以,答案2才是對的。

截圖2021-10-01 下午1.38.52.png

截圖2021-10-01 下午1.41.51.png

同域情況 && 跨域情況?

前面提到了同源策略,滿足協議號-域名-埠號這三者都相同就是同域,反之就是跨域,會導致跨域報錯,下面通過幾個例子讓大家鞏固一下對同域和跨域的認識把!

截圖2021-10-01 上午9.24.38.png

解決跨域的方案

跨域其實是一個很久的問題了,對應的解決方案也有很多,一起接著往下讀吧!!!

JSONP

前面我們們說了,因為瀏覽器同源策略的存在,導致存在跨域問題,那有沒有不受跨域問題所束縛的東西呢?其實是有的,以下這三個標籤載入資源路徑是不受束縛的

  • 1、script標籤:<script src="載入資源路徑"></script>
  • 2、link標籤:<link herf="載入資源路徑"></link>
  • 3、img標籤:<img src="載入資源路徑"></img>

而JSONP就是利用了scriptsrc載入不受束縛,從而可以擁有從不同的域拿到資料的能力。但是JSONP需要前端後端配合,才能實現最終的跨域獲取資料

JSONP通俗點說就是:利用script的src去傳送請求,將一個方法名callback傳給後端,後端拿到這個方法名,將所需資料,通過字串拼接成新的字串callback(所需資料),併傳送到前端,前端接收到這個字串之後,就會自動執行方法callback(所需資料)。老規矩,先上圖,再上程式碼。

截圖2021-10-01 下午1.22.08.png

後端程式碼

// index.js  http://127.0.0.1:8000

const http = require('http');
const urllib = require('url');

const port = 8000;

http.createServer(function (req, res) {
    const { query } = urllib.parse(req.url, true);
    if (query && query.callback) {
        const { name, age, callback } = query
        const person = `${name}今年${age}歲啦!!!`
        const str = `${callback}(${JSON.stringify(person)})` // 拼成callback(data)
        res.end(str);
    } else {
        res.end(JSON.stringify('沒東西啊你'));
    }
}).listen(port, function () {
    console.log('server is listening on port ' + port);
})

前端程式碼

// index.html  http://127.0.0.1:5500/index.html

    const jsonp = (url, params, cbName) => {
        return new Promise((resolve, reject) => {
            const script = document.createElement('script')
            window[cbName] = (data) => {
                resolve(data)
                document.body.removeChild(script)
            }
            params = { ...params, callback: cbName }
            const arr = Object.keys(params).map(key => `${key}=${params[key]}`)
            script.src = `${url}?${arr.join('&')}`
            document.body.appendChild(script)
        })
    }

    jsonp('http://127.0.0.1:8000', { name: '林三心', age: 23 }, 'callback').then(data => {
        console.log(data) // 林三心今年23歲啦!!!
    })

截圖2021-10-01 下午1.47.29.png

JSONP的缺點就是,需要前後端配合,並且只支援get請求方法

WebSocket

WebSocket是什麼東西?其實我也不怎麼懂,但是我也不會像別人一樣把MDN的資料直接複製過來,因為複製過來相信大家也是看不懂的。

我理解的WebSocket是一種協議(跟http同級,都是協議),並且他可以進行跨域通訊,為什麼他支援跨域通訊呢?我這裡找到一篇文章WebSocket憑啥可以跨域?,講的挺好

截圖2021-10-01 下午10.02.39.png

後端程式碼

先安裝npm i ws

// index.js  http://127.0.0.1:8000
const Websocket = require('ws');

const port = 8000;
const ws = new Websocket.Server({ port })
ws.on('connection', (obj) => {
    obj.on('message', (data) => {
        data = JSON.parse(data.toString())
        const { name, age } = data
        obj.send(`${name}今年${age}歲啦!!!`)
    })
})

前端程式碼

// index.html  http://127.0.0.1:5500/index.html


    function myWebsocket(url, params) {
        return new Promise((resolve, reject) => {
            const socket = new WebSocket(url)
            socket.onopen = () => {
                socket.send(JSON.stringify(params))
            }
            socket.onmessage = (e) => {
                resolve(e.data)
            }
        })
    }
    myWebsocket('ws://127.0.0.1:8000', { name: '林三心', age: 23 }).then(data => {
        console.log(data) // 林三心今年23歲啦!!!
    })

結果如下

截圖2021-10-01 下午1.47.29.png

Cors

Cors,全稱是Cross-Origin Resource Sharing,意思是跨域資源共享,Cors一般是由後端來開啟的,一旦開啟,前端就可以跨域訪問後端。

為什麼後端開啟Cors,前端就能跨域請求後端呢?我的理解是:前端跨域訪問到後端,後端開啟Cors,傳送Access-Control-Allow-Origin: 域名 欄位到前端(其實不止一個),前端瀏覽器判斷Access-Control-Allow-Origin的域名如果跟前端域名一樣,瀏覽器就不會實行跨域攔截,從而解決跨域問題。

截圖2021-10-01 下午6.41.11.png

後端程式碼

// index.js  http://127.0.0.1:8000

const http = require('http');
const urllib = require('url');

const port = 8000;

http.createServer(function (req, res) {
    // 開啟Cors
    res.writeHead(200, {
        //設定允許跨域的域名,也可設定*允許所有域名
        'Access-Control-Allow-Origin': 'http://127.0.0.1:5500',
        //跨域允許的請求方法,也可設定*允許所有方法
        "Access-Control-Allow-Methods": "DELETE,PUT,POST,GET,OPTIONS",
        //允許的header型別
        'Access-Control-Allow-Headers': 'Content-Type'
    })
    const { query: { name, age } } = urllib.parse(req.url, true);
    res.end(`${name}今年${age}歲啦!!!`);
}).listen(port, function () {
    console.log('server is listening on port ' + port);
})

前端程式碼

// index.html  http://127.0.0.1:5500/index.html
    //步驟一:建立非同步物件
    var ajax = new XMLHttpRequest();
    //步驟二:設定請求的url引數,引數一是請求的型別,引數二是請求的url,可以帶引數
    ajax.open('get', 'http://127.0.0.1:8000?name=林三心&age=23');
    //步驟三:傳送請求
    ajax.send();
    //步驟四:註冊事件 onreadystatechange 狀態改變就會呼叫
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            //步驟五 如果能夠進到這個判斷 說明 資料 完美的回來了,並且請求的頁面是存在的
            console.log(ajax.responseText);//輸入相應的內容
        }
    }

結果如下

截圖2021-10-01 下午1.47.29.png

截圖2021-10-01 下午7.10.57.png

Node介面代理

還是回到同源策略,同源策略它只是瀏覽器的一個策略而已,它是限制不到後端的,也就是前端-後端會被同源策略限制,但是後端-後端則不會被限制,所以可以通過Node介面代理,先訪問已設定Cors的後端1,再讓後端1去訪問後端2獲取資料到後端1,後端1再把資料傳到前端

截圖2021-10-01 下午8.46.28.png

後端2程式碼

// index.js  http://127.0.0.1:8000

const http = require('http');
const urllib = require('url');

const port = 8000;

http.createServer(function (req, res) {
    console.log(888)
    const { query: { name, age } } = urllib.parse(req.url, true);
    res.end(`${name}今年${age}歲啦!!!`)
}).listen(port, function () {
    console.log('server is listening on port ' + port);
})

建立一個index2.js,並nodmeon index2.js

後端1程式碼

// index2.js  http://127.0.0.1:8888

const http = require('http');
const urllib = require('url');
const querystring = require('querystring');
const port = 8888;

http.createServer(function (req, res) {
    // 開啟Cors
    res.writeHead(200, {
        //設定允許跨域的域名,也可設定*允許所有域名
        'Access-Control-Allow-Origin': 'http://127.0.0.1:5500',
        //跨域允許的請求方法,也可設定*允許所有方法
        "Access-Control-Allow-Methods": "DELETE,PUT,POST,GET,OPTIONS",
        //允許的header型別
        'Access-Control-Allow-Headers': 'Content-Type'
    })
    const { query } = urllib.parse(req.url, true);
    const { methods = 'GET', headers } = req
    const proxyReq = http.request({
        host: '127.0.0.1',
        port: '8000',
        path: `/?${querystring.stringify(query)}`,
        methods,
        headers
    }, proxyRes => {
        proxyRes.on('data', chunk => {
            console.log(chunk.toString())
            res.end(chunk.toString())
        })
    }).end()
}).listen(port, function () {
    console.log('server is listening on port ' + port);
})

前端程式碼

// index.html  http://127.0.0.1:5500

//步驟一:建立非同步物件
    var ajax = new XMLHttpRequest();
    //步驟二:設定請求的url引數,引數一是請求的型別,引數二是請求的url,可以帶引數,動態的傳遞引數starName到服務端
    ajax.open('get', 'http://127.0.0.1:8888?name=林三心&age=23');
    //步驟三:傳送請求
    ajax.send();
    //步驟四:註冊事件 onreadystatechange 狀態改變就會呼叫
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            //步驟五 如果能夠進到這個判斷 說明 資料 完美的回來了,並且請求的頁面是存在的
            console.log(ajax.responseText);//輸入相應的內容
        }
    }

結果如下

截圖2021-10-01 下午1.47.29.png

Nginx

其實NginxNode介面代理是一個道理,只不過Nginx就不需要我們自己去搭建一箇中間服務

截圖2021-10-01 下午8.47.40.png

先下載nginx,然後將nginx目錄下的nginx.conf修改如下:

    server{
        listen 8888;
        server_name  127.0.0.1;
 
        location /{
            proxy_pass 127.0.0.1:8000;
        }
    }

最後通過命令列nginx -s reload啟動nginx

後端程式碼

// index.js  http://127.0.0.1:8000

const http = require('http');
const urllib = require('url');

const port = 8000;

http.createServer(function (req, res) {
    const { query: { name, age } } = urllib.parse(req.url, true);
    res.end(`${name}今年${age}歲啦!!!`);
}).listen(port, function () {
    console.log('server is listening on port ' + port);
})

前端程式碼

// index.html  http://127.0.0.1:5500

//步驟一:建立非同步物件
    var ajax = new XMLHttpRequest();
    //步驟二:設定請求的url引數,引數一是請求的型別,引數二是請求的url,可以帶引數,動態的傳遞引數starName到服務端
    ajax.open('get', 'http://127.0.0.1:8888?name=林三心&age=23');
    //步驟三:傳送請求
    ajax.send();
    //步驟四:註冊事件 onreadystatechange 狀態改變就會呼叫
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            //步驟五 如果能夠進到這個判斷 說明 資料 完美的回來了,並且請求的頁面是存在的
            console.log(ajax.responseText);//輸入相應的內容
        }
    }

結果如下

截圖2021-10-01 下午1.47.29.png

postMessage

場景:http://127.0.0.1:5500/index.html頁面中使用了iframe標籤內嵌了一個http://127.0.0.1:5555/index.html的頁面

雖然這兩個頁面存在於一個頁面中,但是需要iframe標籤來巢狀才行,這兩個頁面之間是無法進行通訊的,因為他們埠號不同,根據同源策略,他們之間存在跨域問題

那應該怎麼辦呢?使用postMessage可以使這兩個頁面進行通訊

截圖2021-10-01 下午9.28.53.png

// http:127.0.0.1:5500/index.html

<body>
    <iframe src="http://127.0.0.1:5555/index.html" id="frame"></iframe>
</body>
<script>
    document.getElementById('frame').onload = function () {
        this.contentWindow.postMessage({ name: '林三心', age: 23 }, 'http://127.0.0.1:5555')
        window.onmessage = function (e) {
            console.log(e.data) // 林三心今年23歲啦!!!
        }
    }
</script>
// http://127.0.0.1:5555/index.html

<script>
        window.onmessage = function (e) {
            const { data: { name, age }, origin } = e
            e.source.postMessage(`${name}今年${age}歲啦!!!`, origin)
        }
</script>

document.domain && iframe

場景:a.sanxin.com/index.htmlb.sanxin.com/index.html之間的通訊

其實上面這兩個正常情況下是無法通訊的,因為他們的域名不相同,屬於跨域通訊

那怎麼辦呢?其實他們有一個共同點,那就是他們的二級域名都是sanxin.com,這使得他們可以通過document.domain && iframe的方式來通訊

截圖2021-10-01 下午9.58.55.png

由於本菜鳥暫時沒有伺服器,所以暫時使用本地來模擬

// http://127.0.0.1:5500/index.html

<body>
    <iframe src="http://127.0.0.1:5555/index.html" id="frame"></iframe>
</body>
<script>
    document.domain = '127.0.0.1'
    document.getElementById('frame').onload = function () {
        console.log(this.contentWindow.data) // 林三心今年23歲啦!!!
    }
</script>
// http://127.0.0.1:5555/index.html

 <script>
        // window.name="林三心今年23歲啦!!!"
        document.domain = '127.0.0.1'
        var data = '林三心今年23歲啦!!!';
</script>

結果如下

截圖2021-10-01 下午1.47.29.png

結語

image.png