前端跨域問題解決及七大跨域原理詳解

更新時間：2022年02月08日 11:13:44 作者：廈門在乎科技

這篇文章主要為大家介紹了前端跨域問題的解決及七大跨域原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

為什么跨域？

為什么會出現(xiàn)跨域問題呢？那就不得不講瀏覽器的同源策略了，它規(guī)定了協(xié)議號-域名-端口號這三者必須都相同才符合同源策略

如有有一個不相同，就會出現(xiàn)跨域問題，不符合同源策略導(dǎo)致的后果有

1、LocalStorge、SessionStorge、Cookie等瀏覽器內(nèi)存無法跨域訪問
2、DOM節(jié)點無法跨域操作
3、Ajax請求無法跨域請求

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

跨域的時機？

跨域發(fā)生在什么時候呢？我考過很多位同學(xué)，得到了兩種答案

1、請求一發(fā)出就被瀏覽器的跨域報錯攔下來了(大多數(shù)人回答)
2、請求發(fā)出去到后端，后端返回數(shù)據(jù)，在瀏覽器接收后端數(shù)據(jù)時被瀏覽器的跨域報錯攔下來

那到底是哪種呢？我們可以驗證下，咱們先npm i nodemon -g，然后創(chuàng)建一個index.js，然后nodemon index起一個node服務(wù)

// 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);
})

再創(chuàng)建一個index.html，用來寫前端的請求代碼，咱們就寫一個簡單的AJAX請求吧

// index.html  http://127.0.0.1:5500/index.html
<script>
    //步驟一:創(chuàng)建異步對象
    var ajax = new XMLHttpRequest();
    //步驟二:設(shè)置請求的url參數(shù),參數(shù)一是請求的類型,參數(shù)二是請求的url,可以帶參數(shù)
    ajax.open('get', 'http://127.0.0.1:8000?name=前端過來的林三心');
    //步驟三:發(fā)送請求
    ajax.send();
    //步驟四:注冊事件 onreadystatechange 狀態(tài)改變就會調(diào)用
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            //步驟五 如果能夠進到這個判斷 說明 數(shù)據(jù) 完美的回來了,并且請求的頁面是存在的
            console.log(ajax.responseText);//輸入相應(yīng)的內(nèi)容
        }
    }
</script>

最終，前端確實是跨域報錯了。但這不是結(jié)果，我們要想知道是哪一個答案，關(guān)鍵在于看后端的node服務(wù)那里有沒有輸出，就一目了然了。所以，答案2才是對的。

同域情況 && 跨域情況？

前面提到了同源策略，滿足協(xié)議號-域名-端口號這三者都相同就是同域，反之就是跨域，會導(dǎo)致跨域報錯，下面通過幾個例子讓大家鞏固一下對同域和跨域的認(rèn)識把！

解決跨域的方案

跨域其實是一個很久的問題了，對應(yīng)的解決方案也有很多，一起接著往下讀吧?。。?/p>

JSONP

前面咱們說了，因為瀏覽器同源策略的存在，導(dǎo)致存在跨域問題，那有沒有不受跨域問題所束縛的東西呢？其實是有的，以下這三個標(biāo)簽加載資源路徑是不受束縛的

1、script標(biāo)簽：<script src="加載資源路徑"></script>

2、link標(biāo)簽：<link herf="加載資源路徑"></link>

3、img標(biāo)簽：<img src="加載資源路徑"></img>

而JSONP就是利用了script的src加載不受束縛，從而可以擁有從不同的域拿到數(shù)據(jù)的能力。但是JSONP需要前端后端配合，才能實現(xiàn)最終的跨域獲取數(shù)據(jù)。

JSONP通俗點說就是：利用script的src去發(fā)送請求，將一個方法名callback傳給后端，后端拿到這個方法名，將所需數(shù)據(jù)，通過字符串拼接成新的字符串callback(所需數(shù)據(jù))，并發(fā)送到前端，前端接收到這個字符串之后，就會自動執(zhí)行方法callback(所需數(shù)據(jù))。

后端代碼

// 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歲啦！?。?
    })

JSONP的缺點就是，需要前后端配合，并且只支持get請求方法

WebSocket

我理解的WebSocket是一種協(xié)議(跟http同級，都是協(xié)議)，并且他可以進行跨域通信。

后端代碼

先安裝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歲啦！??！
    })

Cors

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

為什么后端開啟Cors，前端就能跨域請求后端呢？我的理解是：前端跨域訪問到后端，后端開啟Cors，發(fā)送Access-Control-Allow-Origin: 域名字段到前端（其實不止一個），前端瀏覽器判斷Access-Control-Allow-Origin的域名如果跟前端域名一樣，瀏覽器就不會實行跨域攔截，從而解決跨域問題。

后端代碼

// 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, {
        //設(shè)置允許跨域的域名，也可設(shè)置*允許所有域名
        'Access-Control-Allow-Origin': 'http://127.0.0.1:5500',
        //跨域允許的請求方法，也可設(shè)置*允許所有方法
        "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
    //步驟一:創(chuàng)建異步對象
    var ajax = new XMLHttpRequest();
    //步驟二:設(shè)置請求的url參數(shù),參數(shù)一是請求的類型,參數(shù)二是請求的url,可以帶參數(shù)
    ajax.open('get', 'http://127.0.0.1:8000?name=林三心&age=23');
    //步驟三:發(fā)送請求
    ajax.send();
    //步驟四:注冊事件 onreadystatechange 狀態(tài)改變就會調(diào)用
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            //步驟五 如果能夠進到這個判斷 說明 數(shù)據(jù) 完美的回來了,并且請求的頁面是存在的
            console.log(ajax.responseText);//輸入相應(yīng)的內(nèi)容
        }
    }

Node接口代理

還是回到同源策略，同源策略它只是瀏覽器的一個策略而已，它是限制不到后端的，也就是前端-后端會被同源策略限制，但是后端-后端則不會被限制，所以可以通過Node接口代理，先訪問已設(shè)置Cors的后端1，再讓后端1去訪問后端2獲取數(shù)據(jù)到后端1，后端1再把數(shù)據(jù)傳到前端

后端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);
})

創(chuàng)建一個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, {
        //設(shè)置允許跨域的域名，也可設(shè)置*允許所有域名
        'Access-Control-Allow-Origin': 'http://127.0.0.1:5500',
        //跨域允許的請求方法，也可設(shè)置*允許所有方法
        "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
//步驟一:創(chuàng)建異步對象
    var ajax = new XMLHttpRequest();
    //步驟二:設(shè)置請求的url參數(shù),參數(shù)一是請求的類型,參數(shù)二是請求的url,可以帶參數(shù),動態(tài)的傳遞參數(shù)starName到服務(wù)端
    ajax.open('get', 'http://127.0.0.1:8888?name=林三心&age=23');
    //步驟三:發(fā)送請求
    ajax.send();
    //步驟四:注冊事件 onreadystatechange 狀態(tài)改變就會調(diào)用
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            //步驟五 如果能夠進到這個判斷 說明 數(shù)據(jù) 完美的回來了,并且請求的頁面是存在的
            console.log(ajax.responseText);//輸入相應(yīng)的內(nèi)容
        }
    }

Nginx

其實Nginx跟Node接口代理是一個道理，只不過Nginx就不需要我們自己去搭建一個中間服務(wù)

先下載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
//步驟一:創(chuàng)建異步對象
    var ajax = new XMLHttpRequest();
    //步驟二:設(shè)置請求的url參數(shù),參數(shù)一是請求的類型,參數(shù)二是請求的url,可以帶參數(shù),動態(tài)的傳遞參數(shù)starName到服務(wù)端
    ajax.open('get', 'http://127.0.0.1:8888?name=林三心&age=23');
    //步驟三:發(fā)送請求
    ajax.send();
    //步驟四:注冊事件 onreadystatechange 狀態(tài)改變就會調(diào)用
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            //步驟五 如果能夠進到這個判斷 說明 數(shù)據(jù) 完美的回來了,并且請求的頁面是存在的
            console.log(ajax.responseText);//輸入相應(yīng)的內(nèi)容
        }
    }

postMessage

場景：http://127.0.0.1:5500/index.html頁面中使用了iframe標(biāo)簽內(nèi)嵌了一個http://127.0.0.1:5555/index.html的頁面

雖然這兩個頁面存在于一個頁面中，但是需要iframe標(biāo)簽來嵌套才行，這兩個頁面之間是無法進行通信的，因為他們端口號不同，根據(jù)同源策略，他們之間存在跨域問題

那應(yīng)該怎么辦呢？使用postMessage可以使這兩個頁面進行通信

// 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.html 與 b.sanxin.com/index.html之間的通信

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

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

以上就是前端跨域問題解決及七大跨域原理詳解的詳細(xì)內(nèi)容，更多關(guān)于前端跨域問題及跨域原理的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

前端跨域問題解決及七大跨域原理詳解

目錄

為什么跨域？

跨域的時機？

同域情況 && 跨域情況？

解決跨域的方案

JSONP

WebSocket

Cors

Node接口代理

Nginx

postMessage

document.domain && iframe

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

前端跨域問題解決及七大跨域原理詳解

目錄

為什么跨域？

跨域的時機？

同域情況 && 跨域情況？

解決跨域的方案

JSONP

WebSocket

Cors

Node接口代理

Nginx

postMessage

document.domain && iframe

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

跨域的時機？