Angular4項目解決跨域問題
跨域:
瀏覽器對於javascript的同源策略的限制,例如a.cn下面的js不能調用b.cn中的js,對象或數據(因為a.cn和b.cn是不同域),所以跨域就出現了.
上面提到的,同域的概念又是什麼呢??? 簡單的解釋就是相同域名,埠相同,協議相同
同源策略:
請求的url地址,必須與瀏覽器上的url地址處於同域上,也就是域名,埠,協議相同.
比如:我在本地上的域名是study.cn,請求另外一個域名一段數據
這個時候在瀏覽器上會報錯:
這個就是同源策略的保護,如果瀏覽器對javascript沒有同源策略的保護,那麼一些重要的機密網站將會很危險~
反向代理
反向代理(Reverse Proxy)方式是指以代理伺服器來接受internet上的連接請求,然後將請求轉發給內部網路上的伺服器,並將從伺服器上得到的結果返回給internet上請求連接的客戶端,此時代理伺服器對外就表現為一個反向代理伺服器。
Angular4跨域
Angular4項目分為工程代碼和生產代碼,在本地調試一般都是工程代碼,這樣聯調介面的話,每次寫一個介面都要丟到伺服器上測試,嚴重影響效率,所以我們需要做的就是能在工程項目上聯調介面,隨時能看到效果,但是後端代碼不是部署在本機的話就會有跨域問題,於是我們便需要去著重去解決跨域問題!這樣後端代碼隨時改,前端也可以隨時更改看到效果,實現真正的前後端分離!
對於Angular4解決跨域問題,應該是開發者已經想到這個問題,所以解決這個問題很簡單!那就是反向代理!!
下面介紹反向代理的方法:
{
"/api":{
"target":"http://106.15.179.92"
}
}
http://106.15.179.92:為你連接機器的ip地址,或者你所需要請求的介面域名,這個就是需要被代理的
/api是代理的名稱,一般都是介面請求的ip地址後面的文件夾名
比如:http://106.15.179.92/api/front/frontUserController/login.do,為一個登錄的介面,反向代理後寫介面請求的時候只需要寫
this.$http.post(`/api/front/frontUserController/login.do`,data)
.then(res=>{
Console.log(res);
})
因為http://106.15.179.92已經被代理到/api上!
然後配置」package.json」文件
"scripts": {
"ng": "ng",
"build": "ng build --prod --aot",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
}
甩鍋解決跨域辦法
跨域?和我們前端有關係?有嗎?沒有吧!我不解決,我就不解決,你們後端去解決!
現在介紹一種對於任何項目都通用的解決跨域的方法!
用nginx反向代理實現跨域,是最簡單的跨域方式。只需要修改nginx的配置即可解決跨域問題,支持所有瀏覽器,支持session,不需要修改任何代碼,並且不會影響伺服器性能。
我們只需要配置nginx,在一個伺服器上配置多個前綴來轉發http/https請求到多個真實的伺服器即可。這樣,這個伺服器上所有url都是相同的域名、協議和埠。因此,對於瀏覽器來說,這些url都是同源的,沒有跨域限制。而實際上,這些url實際上由物理伺服器提供服務。這些伺服器內的javascript可以跨域調用所有這些伺服器上的url。
下面,給出一個nginx支持跨域的例子,進行具體說明。
如,我們有兩個pythonflask開發的項目:testFlask1和testFlask2。
testFlask2項目上的javascript腳本要通過ajax方式調用testFlask1的一個url,獲取一些數據。
正常情況下部署,就會有跨域問題,瀏覽器拒絕執行如下這樣的調用。
$("button").click(function () {
$.get("127.0.0.1:8081/partners/json", function (result) {
$("div").html(result);
});
});
下面把testFlask2項目的javascrip文件修改一下。這樣訪問同源的url,就不會有跨域問題。
$("button").click(function () {
$.get("partners/json", function (result) {
$("div").html(result);
});
});
但是,我們testFlask2項目實際上沒有partners/json這樣的url,那怎麼處理呢?
我們這樣編寫nginx的配置文件:
server{
listen8000;
location/ {
includeuwsgi_params;
uwsgi_passunix:/tmp/testFlask2.sock;
}
location/partners {
rewrite^.+partners/?(.*)$ /$1 break;
includeuwsgi_params;
uwsgi_passunix:/tmp/testFlask1.sock;
}
}
我們把testFlask2項目部署在8080埠的根目錄下。把提供web服務的testFlask1項目部署在/partners目錄下。
但我們的testFlask1項目並不能處理/partners/json這樣的url請求。那怎麼辦呢?
通過rewrite^.+partners/?(.*)$ /$1 break; 這一條命令,nginx可以把收到的/partners/*請求全部轉為/*請求後再轉發給背後的真實web伺服器。
這樣,RESTFUL的ajax客戶端程序,只需要給出特定前綴的url就可以調用任意伺服器提供的RESTFUL介面了。
甚至,通過nginx的反向代理,我們還能調用其他公司開發的網站提供的RESTFUL介面。
如,
location/sohu {
rewrite^.+sohu/?(.*)$ /$1 break;
includeuwsgi_params;
}
我們就把sohu網站整個搬到我們的8080:/sohu/目錄下了,我們的javascript就可以盡情調用其RESTFUL服務了。
順便說一下,rewrite^.+sohu/?(.*)$ /$1 break; 這句命令中,$1表示(.*)這個部分。第一對()內的參數是$1,第二對()內的參數就是$2,以此類推.
TAG:U世界的V夢想 |
※Spring Cloud項目前後端分離跨域問題解決
※Android項目解耦-路由框架ARouter源碼解析
※為刺激VR/AR領域發展 Digital Catapult再次啟動Augmentor項目
※專業解讀 Business Analytics項目
※Android Studio項目模板全面解析
※SpringBoot應用不能訪問項目靜態頁面html問題處理
※Google試圖僱用Vitalik Buterin進行秘密加密項目
※淺談Android項目目錄
※Origin Protocol項目短評
※【項目分析】Origin Protocol 愛西歐
※微軟surface Phone項目因系統問題被擱置
※Kickstarter升級Hardware Studio:讓投資者知道眾籌項目發展進度
※歐貳國際 International O2 Design 建築設計項目部
※eBay推出「Always Open on eBay」項目
※Karmin更新Aripuan?鋅項目開發
※Mozilla 項目
※AA評級項目Origin Protocol 區塊鏈3.0 起源協議
※項目分析篇——ContentBox
※使用Visual Studio Code編譯、調試Apollo項目
※flask 項目中使用 bootstrapFileInput