Angular4如何開發(fā)解決跨域問題
這篇文章主要介紹了Angular4如何開發(fā)解決跨域問題，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比和靜網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式和靜網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋和靜地區(qū)。費用合理售后完善，十載實體公司更值得信賴。
1.跨域
瀏覽器對于javascript的同源策略的限制,例如a.cn下面的js不能調(diào)用b.cn中的js,對象或數(shù)據(jù)(因為a.cn和b.cn是不同域),所以跨域就出現(xiàn)了.
上面提到的,同域的概念又是什么呢??? 簡單的解釋就是相同域名,端口相同,協(xié)議相同
同源策略:
請求的url地址,必須與瀏覽器上的url地址處于同域上,也就是域名,端口,協(xié)議相同.
比如:我在本地上的域名是study.cn,請求另外一個域名一段數(shù)據(jù),這個時候在瀏覽器上會報錯,這個就是同源策略的保護,如果瀏覽器對javascript沒有同源策略的保護,那么一些重要的機密網(wǎng)站將會很危險~
2.反向代理
反向代理（Reverse Proxy）方式是指以代理服務(wù)器來接受internet上的連接請求，然后將請求轉(zhuǎn)發(fā)給內(nèi)部網(wǎng)絡(luò)上的服務(wù)器，并將從服務(wù)器上得到的結(jié)果返回給internet上請求連接的客戶端，此時代理服務(wù)器對外就表現(xiàn)為一個反向代理服務(wù)器。
3.Angular4跨域
Angular4項目分為工程代碼和生產(chǎn)代碼,在本地調(diào)試一般都是工程代碼,這樣聯(lián)調(diào)接口的話,每次寫一個接口都要丟到服務(wù)器上測試,嚴重影響效率,所以我們需要做的就是能在工程項目上聯(lián)調(diào)接口,隨時能看到效果,但是后端代碼不是部署在本機的話就會有跨域問題,于是我們便需要去著重去解決跨域問題!這樣后端代碼隨時改,前端也可以隨時更改看到效果,實現(xiàn)真正的前后端分離!
對于Angular4解決跨域問題,應(yīng)該是開發(fā)者已經(jīng)想到這個問題,所以解決這個問題很簡單!那就是反向代理!!
下面介紹反向代理的方法:
1.首先需要建立一個JSON文件,文件名”proxy.config.json”
{
"/api":{
"target":"http://106.15.179.92"
}
}http://106.15.179.92:為你連接機器的ip地址,或者你所需要請求的接口域名,這個就是需要被代理的
/api是代理的名稱,一般都是接口請求的ip地址后面的第一個參數(shù)名
比如:http://106.15.179.92/api/fron...為一個登錄的接口,反向代理后寫接口請求的時候只需要寫
this.$http.post(`/api/front/frontUserController/login.do`,data)
.then(res=>{
Console.log(res);
})因為http://106.15.179.92已經(jīng)被代理到/api上!
2.然后配置”package.json”文件
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.config.json",
"build": "ng build --prod --aot",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
}4.甩鍋解決跨域
跨域?和我們前端有關(guān)系?有嗎?沒有吧!我不解決,我就不解決,你們后端去解決!
現(xiàn)在介紹一種對于任何項目都通用的解決跨域的方法!
用nginx反向代理實現(xiàn)跨域，是最簡單的跨域方式。只需要修改nginx的配置即可解決跨域問題，支持所有瀏覽器，支持session，不需要修改任何代碼，并且不會影響服務(wù)器性能。
我們只需要配置nginx，在一個服務(wù)器上配置多個前綴來轉(zhuǎn)發(fā)http/https請求到多個真實的服務(wù)器即可。這樣，這個服務(wù)器上所有url都是相同的域名、協(xié)議和端口。因此，對于瀏覽器來說，這些url都是同源的，沒有跨域限制。而實際上，這些url實際上由物理服務(wù)器提供服務(wù)。這些服務(wù)器內(nèi)的javascript可以跨域調(diào)用所有這些服務(wù)器上的url。
下面，給出一個nginx支持跨域的例子，進行具體說明。
如，我們有兩個pythonflask開發(fā)的項目：testFlask1和testFlask2。
testFlask2項目上的javascript腳本要通過ajax方式調(diào)用testFlask1的一個url，獲取一些數(shù)據(jù)。
正常情況下部署，就會有跨域問題，瀏覽器拒絕執(zhí)行如下這樣的調(diào)用。
$("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服務(wù)的testFlask1項目部署在/partners目錄下。
但我們的testFlask1項目并不能處理/partners/json這樣的url請求。那怎么辦呢？
通過rewrite^.+partners/?(.)$ /$1 break; 這一條命令，nginx可以把收到的/partners/請求全部轉(zhuǎn)為/*請求后再轉(zhuǎn)發(fā)給背后的真實web服務(wù)器。
這樣，RESTFUL的ajax客戶端程序，只需要給出特定前綴的url就可以調(diào)用任意服務(wù)器提供的RESTFUL接口了。
甚至，通過nginx的反向代理，我們還能調(diào)用其他公司開發(fā)的網(wǎng)站提供的RESTFUL接口。
如，
location/sohu {
rewrite^.+sohu/?(.*)$ /$1 break;
includeuwsgi_params;
proxy_passhttp://www.sohu.com/;
}我們就把sohu網(wǎng)站整個搬到我們的8080:/sohu/目錄下了，我們的javascript就可以盡情調(diào)用其RESTFUL服務(wù)了。
順便說一下，rewrite^.+sohu/?(.)$ /$1 break; 這句命令中，$1表示(.)這個部分。第一對()內(nèi)的參數(shù)是$1，第二對()內(nèi)的參數(shù)就是$2，以此類推。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“Angular4如何開發(fā)解決跨域問題”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
名稱欄目：Angular4如何開發(fā)解決跨域問題
文章URL：http://m.jiaotiyi.com/article/ppcedd.html