日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當前位置:首頁 > 科技  > 軟件

良苦用心??!我把七大跨域解決方法原理畫成十張圖,做成圖解!

來源: 責編: 時間:2024-03-20 17:25:40 182觀看
導讀前言大家好,我是林三心。用最通俗易懂的話講最難的知識點是我的座右銘,基礎是進階的前提是我的初衷。咱們做前端的,平時跟后端對接接口那是必須的事情,但是可能很多同學忽略了一個對接過程中可能會發生的問題——跨域,那跨

前言

大家好,我是林三心。用最通俗易懂的話講最難的知識點是我的座右銘,基礎是進階的前提是我的初衷。z1j28資訊網——每日最新資訊28at.com

咱們做前端的,平時跟后端對接接口那是必須的事情,但是可能很多同學忽略了一個對接過程中可能會發生的問題——跨域,那跨域到底是啥呢?為什么會跨域呢?又怎么才能解決呢?z1j28資訊網——每日最新資訊28at.com

截屏2021-10-01 上午7.16.06.png截屏2021-10-01 上午7.16.06.pngz1j28資訊網——每日最新資訊28at.com

為什么跨域?

為什么會出現跨域問題呢?那就不得不講瀏覽器的同源策略了,它規定了協議號-域名-端口號這三者必須都相同才符合同源策略z1j28資訊網——每日最新資訊28at.com

圖片圖片z1j28資訊網——每日最新資訊28at.com

截屏2021-10-01 上午8.50.11.pngz1j28資訊網——每日最新資訊28at.com

如有有一個不相同,就會出現跨域問題,不符合同源策略導致的后果有z1j28資訊網——每日最新資訊28at.com

1、LocalStorge、SessionStorge、Cookie等瀏覽器內存無法跨域訪問z1j28資訊網——每日最新資訊28at.com

2、DOM節點無法跨域操作z1j28資訊網——每日最新資訊28at.com

3、Ajax請求無法跨域請求z1j28資訊網——每日最新資訊28at.com

注意點:一個IP是可以注冊多個不同域名的,也就是多個域名可能指向同一個IP,即使是這樣,他們也不符合同源策略z1j28資訊網——每日最新資訊28at.com

圖片圖片z1j28資訊網——每日最新資訊28at.com

截屏2021-10-01 上午9.02.55.pngz1j28資訊網——每日最新資訊28at.com

跨域的時機?

跨域發生在什么時候呢?我考過很多位同學,得到了兩種答案z1j28資訊網——每日最新資訊28at.com

1、請求一發出就被瀏覽器的跨域報錯攔下來了(大多數人回答)z1j28資訊網——每日最新資訊28at.com

2、請求發出去到后端,后端返回數據,在瀏覽器接收后端數據時被瀏覽器的跨域報錯攔下來z1j28資訊網——每日最新資訊28at.com

那到底是哪種呢?我們可以驗證下,咱們先npm i nodemon -g,然后創建一個index.js,然后nodemon index起一個node服務z1j28資訊網——每日最新資訊28at.com

// index.js  http://127.0.0.1:8000const 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請求吧z1j28資訊網——每日最新資訊28at.com

// 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>

圖片圖片z1j28資訊網——每日最新資訊28at.com

最終,前端確實是跨域報錯了。但這不是結果,我們要想知道是哪一個答案,關鍵在于看后端的node服務那里有沒有輸出,就一目了然了。所以,答案2才是對的。z1j28資訊網——每日最新資訊28at.com

圖片圖片z1j28資訊網——每日最新資訊28at.com

圖片圖片z1j28資訊網——每日最新資訊28at.com

同域情況 && 跨域情況?

前面提到了同源策略,滿足協議號-域名-端口號這三者都相同就是同域,反之就是跨域,會導致跨域報錯,下面通過幾個例子讓大家鞏固一下對同域和跨域的認識把!z1j28資訊網——每日最新資訊28at.com

圖片圖片z1j28資訊網——每日最新資訊28at.com

解決跨域的方案

跨域其實是一個很久的問題了,對應的解決方案也有很多,一起接著往下讀吧?。?!z1j28資訊網——每日最新資訊28at.com

JSONP

前面咱們說了,因為瀏覽器同源策略的存在,導致存在跨域問題,那有沒有不受跨域問題所束縛的東西呢?其實是有的,以下這三個標簽加載資源路徑是不受束縛的z1j28資訊網——每日最新資訊28at.com

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

而JSONP就是利用了script的src加載不受束縛,從而可以擁有從不同的域拿到數據的能力。但是JSONP需要前端后端配合,才能實現最終的跨域獲取數據。z1j28資訊網——每日最新資訊28at.com

JSONP通俗點說就是:利用script的src去發送請求,將一個方法名callback傳給后端,后端拿到這個方法名,將所需數據,通過字符串拼接成新的字符串callback(所需數據),并發送到前端,前端接收到這個字符串之后,就會自動執行方法callback(所需數據)。老規矩,先上圖,再上代碼。z1j28資訊網——每日最新資訊28at.com

圖片圖片z1j28資訊網——每日最新資訊28at.com

后端代碼:z1j28資訊網——每日最新資訊28at.com

// index.js  http://127.0.0.1:8000const 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);})

前端代碼:z1j28資訊網——每日最新資訊28at.com

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

圖片圖片z1j28資訊網——每日最新資訊28at.com

JSONP的缺點就是,需要前后端配合,并且只支持get請求方法。z1j28資訊網——每日最新資訊28at.com

WebSocket

WebSocket是什么東西?其實我也不怎么懂,但是我也不會像別人一樣把MDN的資料直接復制過來,因為復制過來相信大家也是看不懂的。z1j28資訊網——每日最新資訊28at.com

我理解的WebSocket是一種協議(跟http同級,都是協議),并且他可以進行跨域通信,為什么他支持跨域通信呢?我這里找到一篇文章WebSocket憑啥可以跨域?,講的挺好。z1j28資訊網——每日最新資訊28at.com

圖片圖片z1j28資訊網——每日最新資訊28at.com

后端代碼

先安裝npm i ws。z1j28資訊網——每日最新資訊28at.com

// index.js  http://127.0.0.1:8000const 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}歲啦!??!`)    })})

前端代碼:z1j28資訊網——每日最新資訊28at.com

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

結果如下:z1j28資訊網——每日最新資訊28at.com

圖片圖片z1j28資訊網——每日最新資訊28at.com

截屏2021-10-01 下午1.47.29.pngz1j28資訊網——每日最新資訊28at.com

Cors

Cors,全稱是Cross-Origin Resource Sharing,意思是跨域資源共享,Cors一般是由后端來開啟的,一旦開啟,前端就可以跨域訪問后端。z1j28資訊網——每日最新資訊28at.com

為什么后端開啟Cors,前端就能跨域請求后端呢?我的理解是:前端跨域訪問到后端,后端開啟Cors,發送Access-Control-Allow-Origin: 域名 字段到前端(其實不止一個),前端瀏覽器判斷Access-Control-Allow-Origin的域名如果跟前端域名一樣,瀏覽器就不會實行跨域攔截,從而解決跨域問題。z1j28資訊網——每日最新資訊28at.com

圖片圖片z1j28資訊網——每日最新資訊28at.com

后端代碼

// index.js  http://127.0.0.1:8000const 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);//輸入相應的內容        }    }

結果如下:z1j28資訊網——每日最新資訊28at.com

圖片圖片z1j28資訊網——每日最新資訊28at.com

截屏2021-10-01 下午1.47.29.pngz1j28資訊網——每日最新資訊28at.com

圖片圖片z1j28資訊網——每日最新資訊28at.com

Node接口代理

還是回到同源策略,同源策略它只是瀏覽器的一個策略而已,它是限制不到后端的,也就是前端-后端會被同源策略限制,但是后端-后端則不會被限制,所以可以通過Node接口代理,先訪問已設置Cors的后端1,再讓后端1去訪問后端2獲取數據到后端1,后端1再把數據傳到前端。z1j28資訊網——每日最新資訊28at.com

圖片圖片z1j28資訊網——每日最新資訊28at.com

后端2代碼

// index.js  http://127.0.0.1:8000const 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,并nodemon index2.jsz1j28資訊網——每日最新資訊28at.com

后端1代碼

// index2.js  http://127.0.0.1:8888const 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);//輸入相應的內容        }    }

結果如下:z1j28資訊網——每日最新資訊28at.com

圖片圖片z1j28資訊網——每日最新資訊28at.com

Nginx

其實Nginx跟Node接口代理是一個道理,只不過Nginx就不需要我們自己去搭建一個中間服務。z1j28資訊網——每日最新資訊28at.com

圖片圖片z1j28資訊網——每日最新資訊28at.com

先下載nginx[1],然后將nginx目錄下的nginx.conf修改如下:z1j28資訊網——每日最新資訊28at.com

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

最后通過命令行nginx -s reload啟動nginx。z1j28資訊網——每日最新資訊28at.com

后端代碼

// index.js  http://127.0.0.1:8000const 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);//輸入相應的內容        }    }

結果如下:z1j28資訊網——每日最新資訊28at.com

圖片圖片z1j28資訊網——每日最新資訊28at.com

postMessage

場景:http://127.0.0.1:5500/index.html頁面中使用了iframe標簽內嵌了一個http://127.0.0.1:5555/index.html的頁面。z1j28資訊網——每日最新資訊28at.com

雖然這兩個頁面存在于一個頁面中,但是需要iframe標簽來嵌套才行,這兩個頁面之間是無法進行通信的,因為他們端口號不同,根據同源策略,他們之間存在跨域問題。z1j28資訊網——每日最新資訊28at.com

那應該怎么辦呢?使用postMessage可以使這兩個頁面進行通信。z1j28資訊網——每日最新資訊28at.com

圖片圖片z1j28資訊網——每日最新資訊28at.com

// 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之間的通信。z1j28資訊網——每日最新資訊28at.com

其實上面這兩個正常情況下是無法通信的,因為他們的域名不相同,屬于跨域通信。z1j28資訊網——每日最新資訊28at.com

那怎么辦呢?其實他們有一個共同點,那就是他們的二級域名都是sanxin.com,這使得他們可以通過document.domain && iframe的方式來通信。z1j28資訊網——每日最新資訊28at.com

圖片圖片z1j28資訊網——每日最新資訊28at.com

由于本菜鳥暫時沒有服務器,所以暫時使用本地來模擬。z1j28資訊網——每日最新資訊28at.com

// 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>

結果如下:z1j28資訊網——每日最新資訊28at.com

圖片圖片z1j28資訊網——每日最新資訊28at.com

本文鏈接:http://www.www897cc.com/showinfo-26-78142-0.html良苦用心??!我把七大跨域解決方法原理畫成十張圖,做成圖解!

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 微軟推出 Garnet 緩存存儲系統:高吞吐量、低延遲、可擴展

下一篇: 月之暗面技術重磅突破:Kimi200萬字上下文窗口內測開啟

標簽:
  • 熱門焦點
  • iPhone賣不動了!蘋果股價創年內最大日跌幅:市值一夜蒸發萬億元

    8月5日消息,今天凌晨美股三大指數高開低走集體收跌,道指跌0.41%;納指跌0.36%;標普500指數跌0.52%。熱門科技股也都變化極大,其中蘋果報181.99美元,跌4.8%,創
  • 2023 年的 Node.js 生態系統

    隨著技術的不斷演進和創新,Node.js 在 2023 年達到了一個新的高度。Node.js 擁有一個龐大的生態系統,可以幫助開發人員更快地實現復雜的應用。本文就來看看 Node.js 最新的生
  • 讓我們一起聊聊文件的操作

    文件【1】文件是什么?文件是保存數據的地方,是數據源的一種,比如大家經常使用的word文檔、txt文件、excel文件、jpg文件...都是文件。文件最主要的作用就是保存數據,它既可以保
  • 之家push系統迭代之路

    前言在這個信息爆炸的互聯網時代,能夠及時準確獲取信息是當今社會要解決的關鍵問題之一。隨著之家用戶體量和內容規模的不斷增大,傳統的靠"主動拉"獲取信息的方式已不能滿足用
  • 慕巖炮轟抖音,百合網今何在?

    來源:價值研究所 作者:Hernanderz&ldquo;難道就因為自己的一個產品牛逼了,從客服到總裁,都不愿意正視自己產品和運營上的問題,選擇逃避了嗎?&rdquo;這一番話,出自百合網聯合創
  • 共享單車的故事講到哪了?

    來源丨??素斀浥c共享充電寶相差不多,共享單車已很久沒有被國內熱點新聞關照到了。除了一再漲價和用戶直呼用不起了。近日多家媒體再發報道稱,成都、天津、鄭州等地多個共享單
  • 猿輔導與新東方的兩種“歸途”

    作者|卓心月 出品|零態LT(ID:LingTai_LT)如何成為一家偉大企業?答案一定是對&ldquo;勢&rdquo;的把握,這其中最關鍵的當屬對企業戰略的制定,且能夠站在未來看現在,即使這其中的
  • 當家的盒馬,加速謀生

    來源 | 價值星球Planet作者 | 歸去來自己&ldquo;當家&rdquo;的盒馬,開始加速謀生了。據盒馬官微消息,盒馬計劃今年開放生鮮供應鏈,將其生鮮商品送往食堂。目前,盒馬在上海已經與
  • 華為Mate 60保護殼曝光:碩大后置相機模組 凸起程度有驚喜

    這段時間以來,關于華為新旗艦的爆料日漸密集。據此前多方爆料,今年華為將開始恢復一年雙旗艦戰略,除上半年推出的P60系列外,往年下半年的Mate系列也將
Top 主站蜘蛛池模板: 洮南市| 泰宁县| 宁化县| 韶山市| 宕昌县| 濮阳市| 永修县| 东方市| 南江县| 湖北省| 南丹县| 嘉善县| 页游| 长汀县| 徐闻县| 高唐县| 扎兰屯市| 巴彦淖尔市| 齐齐哈尔市| 长丰县| 民县| 汕尾市| 方正县| 社会| 合山市| 涞水县| 瑞安市| 陇南市| 静乐县| 黎平县| 仁化县| 报价| 天镇县| 探索| 博湖县| 子长县| 林甸县| 永昌县| 冕宁县| 宜城市| 会宁县|