Angular4如何開發(fā)解決跨域問(wèn)題-創(chuàng)新互聯(lián)

這篇文章主要介紹了Angular4如何開發(fā)解決跨域問(wèn)題，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供布爾津網(wǎng)站建設(shè)、布爾津做網(wǎng)站、布爾津網(wǎng)站設(shè)計(jì)、布爾津網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、布爾津企業(yè)網(wǎng)站模板建站服務(wù)，10多年布爾津做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

1.跨域

瀏覽器對(duì)于javascript的同源策略的限制,例如a.cn下面的js不能調(diào)用b.cn中的js,對(duì)象或數(shù)據(jù)(因?yàn)閍.cn和b.cn是不同域),所以跨域就出現(xiàn)了.

上面提到的,同域的概念又是什么呢??? 簡(jiǎn)單的解釋就是相同域名,端口相同,協(xié)議相同

同源策略:

請(qǐng)求的url地址,必須與瀏覽器上的url地址處于同域上,也就是域名,端口,協(xié)議相同.

比如:我在本地上的域名是study.cn,請(qǐng)求另外一個(gè)域名一段數(shù)據(jù),這個(gè)時(shí)候在瀏覽器上會(huì)報(bào)錯(cuò),這個(gè)就是同源策略的保護(hù),如果瀏覽器對(duì)javascript沒(méi)有同源策略的保護(hù),那么一些重要的機(jī)密網(wǎng)站將會(huì)很危險(xiǎn)~

2.反向代理

反向代理（Reverse Proxy）方式是指以代理服務(wù)器來(lái)接受internet上的連接請(qǐng)求，然后將請(qǐng)求轉(zhuǎn)發(fā)給內(nèi)部網(wǎng)絡(luò)上的服務(wù)器，并將從服務(wù)器上得到的結(jié)果返回給internet上請(qǐng)求連接的客戶端，此時(shí)代理服務(wù)器對(duì)外就表現(xiàn)為一個(gè)反向代理服務(wù)器。

3.Angular4跨域

Angular4項(xiàng)目分為工程代碼和生產(chǎn)代碼,在本地調(diào)試一般都是工程代碼,這樣聯(lián)調(diào)接口的話,每次寫一個(gè)接口都要丟到服務(wù)器上測(cè)試,嚴(yán)重影響效率,所以我們需要做的就是能在工程項(xiàng)目上聯(lián)調(diào)接口,隨時(shí)能看到效果,但是后端代碼不是部署在本機(jī)的話就會(huì)有跨域問(wèn)題,于是我們便需要去著重去解決跨域問(wèn)題!這樣后端代碼隨時(shí)改,前端也可以隨時(shí)更改看到效果,實(shí)現(xiàn)真正的前后端分離!
對(duì)于Angular4解決跨域問(wèn)題,應(yīng)該是開發(fā)者已經(jīng)想到這個(gè)問(wèn)題,所以解決這個(gè)問(wèn)題很簡(jiǎn)單!那就是反向代理!!

下面介紹反向代理的方法:

1.首先需要建立一個(gè)JSON文件,文件名”proxy.config.json”

{
 "/api":{
  "target":"http://106.15.179.92"
 }
}

http://106.15.179.92:為你連接機(jī)器的ip地址,或者你所需要請(qǐng)求的接口域名,這個(gè)就是需要被代理的

/api是代理的名稱,一般都是接口請(qǐng)求的ip地址后面的第一個(gè)參數(shù)名

比如:http://106.15.179.92/api/fron...為一個(gè)登錄的接口,反向代理后寫接口請(qǐng)求的時(shí)候只需要寫

this.$http.post(`/api/front/frontUserController/login.do`,data)
   .then(res=>{
       Console.log(res);
})

因?yàn)閔ttp://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)系?有嗎?沒(méi)有吧!我不解決,我就不解決,你們后端去解決!

現(xiàn)在介紹一種對(duì)于任何項(xiàng)目都通用的解決跨域的方法!

用nginx反向代理實(shí)現(xiàn)跨域，是最簡(jiǎn)單的跨域方式。只需要修改nginx的配置即可解決跨域問(wèn)題，支持所有瀏覽器，支持session，不需要修改任何代碼，并且不會(huì)影響服務(wù)器性能。

我們只需要配置nginx，在一個(gè)服務(wù)器上配置多個(gè)前綴來(lái)轉(zhuǎn)發(fā)http/https請(qǐng)求到多個(gè)真實(shí)的服務(wù)器即可。這樣，這個(gè)服務(wù)器上所有url都是相同的域名、協(xié)議和端口。因此，對(duì)于瀏覽器來(lái)說(shuō)，這些url都是同源的，沒(méi)有跨域限制。而實(shí)際上，這些url實(shí)際上由物理服務(wù)器提供服務(wù)。這些服務(wù)器內(nèi)的javascript可以跨域調(diào)用所有這些服務(wù)器上的url。

下面，給出一個(gè)nginx支持跨域的例子，進(jìn)行具體說(shuō)明。

如，我們有兩個(gè)pythonflask開發(fā)的項(xiàng)目：testFlask1和testFlask2。

testFlask2項(xiàng)目上的javascript腳本要通過(guò)ajax方式調(diào)用testFlask1的一個(gè)url，獲取一些數(shù)據(jù)。

正常情況下部署，就會(huì)有跨域問(wèn)題，瀏覽器拒絕執(zhí)行如下這樣的調(diào)用。

$("button").click(function () {
  $.get("127.0.0.1:8081/partners/json", function (result) {
    $("div").html(result);
  });
});

下面把testFlask2項(xiàng)目的javascrip文件修改一下。這樣訪問(wèn)同源的url，就不會(huì)有跨域問(wèn)題。

$(&quot;button&quot;).click(function () {
  $.get(&quot;partners/json&quot;, function (result) {
    $(&quot;div&quot;).html(result);
  });
});

但是，我們testFlask2項(xiàng)目實(shí)際上沒(méi)有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項(xiàng)目部署在8080端口的根目錄下。把提供web服務(wù)的testFlask1項(xiàng)目部署在/partners目錄下。

但我們的testFlask1項(xiàng)目并不能處理/partners/json這樣的url請(qǐng)求。那怎么辦呢？

通過(guò)rewrite^.+partners/?(.)$ /$1 break; 這一條命令，nginx可以把收到的/partners/請(qǐng)求全部轉(zhuǎn)為/*請(qǐng)求后再轉(zhuǎn)發(fā)給背后的真實(shí)web服務(wù)器。

這樣，RESTFUL的ajax客戶端程序，只需要給出特定前綴的url就可以調(diào)用任意服務(wù)器提供的RESTFUL接口了。

甚至，通過(guò)nginx的反向代理，我們還能調(diào)用其他公司開發(fā)的網(wǎng)站提供的RESTFUL接口。

如，

location/sohu {
 rewrite^.+sohu/?(.*)$ /$1 break;
 includeuwsgi_params;
 proxy_passhttp://www.sohu.com/;
}

我們就把sohu網(wǎng)站整個(gè)搬到我們的8080:/sohu/目錄下了，我們的javascript就可以盡情調(diào)用其RESTFUL服務(wù)了。

順便說(shuō)一下，rewrite^.+sohu/?(.)$ /$1 break; 這句命令中，$1表示(.)這個(gè)部分。第一對(duì)()內(nèi)的參數(shù)是$1，第二對(duì)()內(nèi)的參數(shù)就是$2，以此類推。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Angular4如何開發(fā)解決跨域問(wèn)題”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁(yè)題目：Angular4如何開發(fā)解決跨域問(wèn)題-創(chuàng)新互聯(lián)
URL分享：http://muchs.cn/article6/dsppog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、虛擬主機(jī)、ChatGPT、電子商務(wù)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容