阿里P7架構師是如何解決跨域問題的!你有遇到嗎?

2021-09-27 04:49:24 字數 1721 閱讀 9991

現在越來越多的專案就算是乙個管理後端也偏向於使用前後端分離的部署方式去做,為了順應時代的潮流,一前後端分離就產生了跨域問題,所以許多同學把跨域和前後端分離專案聯絡在了一起,其實跨域產生的原因並不是前後端分離導致的,那我們一起來看一下,希望可以靠這一篇文章解答大家所有的跨域問題

以上三個條件缺一不可,尤其是第三個條件許多做移動端的同學可能都沒有聽過,因為移動端爽爽的用各種http請求狂發不同的網域名稱,但是瀏覽器不允許我們這麼做,為了乙個詞安全

解決跨域問題的根本就是要打破上述的三個限制中的任何乙個,我們來看一下逐個擊破的方式

jsonp是打破第一重限制,用了xmlhttprequest就跨域,那我不用這種方式了,我們怎麼做的,來看一段jquery的帶jsonp的ajax請求

$.ajax(,

error : function(data)

});

看似用了ajax請求,其實內部完全不是那麼回事,多了jsonp和jsonpcallback選項,它內部將**翻譯並把頁面上的dom操作成這樣

這個時候,html頁面的script src標籤回去訪問api.map.baidu.com的服務端,由於script,img這種標籤瀏覽器是不受xmlhttprequest限制的,可以隨意訪問,這個時候對應的後端**取得address引數,最後根據雙方約定好的callback引數,返回乙個被包裝後的json,即

showlocation(,

precise: 1,

confidence: 80,

comprehension: 99,

level: "道路"}})

然後瀏覽器直接執行了對應的這個showlocation()… 等等,這個不就相當於執行了我們上面定義的window.showlocation方法並且傳入了我們需要的json返回嗎,那我們的ajax success方法裡就可以得到這個返回型別了,並且沒有跨域,是不是很精妙。

cors是乙個w3c標準,全稱是"跨域資源共享"(cross-origin resource sharing)跨域資源共享 cors 詳解。這個玩樣用於「破解」掉瀏覽器的限制,說是破解其實也是瀏覽器認識到了一些頭部就放行了的意思,需要在http的response內多設定幾個頭部

若你使用的是nginx反向**,則可以直接在nginx反向**上配置

location /
打破不同源的限制,我只要讓它同源就可以了,比如要我的靜態頁面是 動態ajax請求訪問的是

我只需要將對應的服務部署在不同的機器上,然後使用乙個公共的c.com的網域名稱作為nginx反向**的入口網域名稱,在將靜態服務和動態服務分別掛在後面的被**區域網伺服器內,修改配置

server

#ajax動態請求

location /api

}

這樣就變成同源了

......第三:記得點關注,每天更新的!!!...

奈學教育《P7架構師》課程大綱

階段一 核心基礎元件原始碼深入剖析篇 第一單元 掌握rpc核心原理 1.rpc核心原理剖析 2.rpc核心知識剖析 第二單元 掌握rpc具體開源專案原理與實踐 rpc核心知識剖析 dubbo深度講解 第三單元 掌握rocketmq的原理與應用 訊息佇列設計思考 訊息佇列選型場景與方案 基於rocke...

阿里P7級架構師總結Spring核心模組及功能彙總

如果你在使用spring,而且沒有使用springboot,那麼每個spring的功能都需要引入相應的jar包依賴。而spring的jar包依賴又有一二十個,很容易混淆,造成編譯或執行錯誤。下面我們就整理一下spring3和spring4的核心模組和對應的jar包,方便我們在具體使用的過程中更加清晰...

如果我是12306架構師

12306,因為系統問題,成了it業界內大家茶餘飯後經常談論的話題。先分享乙個真實故事,我同事看了12306這個 他說,這個 做下來只要5萬,我反駁,被他嘲笑。笑話終歸笑話,沒有諷刺鐵道部,以及12306研發方的意思,我同事是實習生,他不懂12306。近日,我們在乙個技術群裡討論了乙個開放式話題 如...