Angular4開發解決跨域問題

1.跨域

瀏覽器對於javascript的同源策略的限制,例如a.cn下面的js不能調用b.cn中的js,對象或數據(由於a.cn和b.cn是不一樣域),因此跨域就出現了.
上面提到的,同域的概念又是什麼呢??? 簡單的解釋就是相同域名,端口相同,協議相同
同源策略:
請求的url地址,必須與瀏覽器上的url地址處於同域上,也就是域名,端口,協議相同.
好比:我在本地上的域名是study.cn,請求另一個域名一段數據,這個時候在瀏覽器上會報錯,這個就是同源策略的保護,若是瀏覽器對javascript沒有同源策略的保護,那麼一些重要的機密網站將會很危險~

2.反向代理

反向代理（Reverse Proxy）方式是指以代理服務器來接受internet上的鏈接請求，而後將請求轉發給內部網絡上的服務器，並將從服務器上獲得的結果返回給internet上請求鏈接的客戶端，此時代理服務器對外就表現爲一個反向代理服務器。

3.Angular4跨域

Angular4項目分爲工程代碼和生產代碼,在本地調試通常都是工程代碼,這樣聯調接口的話,每次寫一個接口都要丟到服務器上測試,嚴重影響效率,因此咱們須要作的就是能在工程項目上聯調接口,隨時能看到效果,可是後端代碼不是部署在本機的話就會有跨域問題,因而咱們便須要去着重去解決跨域問題!這樣後端代碼隨時改,前端也能夠隨時更改看到效果,實現真正的先後端分離!
對於Angular4解決跨域問題,應該是開發者已經想到這個問題,因此解決這個問題很簡單!那就是反向代理!!
下面介紹反向代理的方法:
1.首先須要創建一個JSON文件,文件名」proxy.config.json」

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

http://106.15.179.92:爲你鏈接機器的ip地址,或者你所須要請求的接口域名,這個就是須要被代理的
/api是代理的名稱,通常都是接口請求的ip地址後面的第一個參數名
好比: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已經被代理到/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.甩鍋解決跨域

跨域?和咱們前端有關係?有嗎?沒有吧!我不解決,我就不解決,大家後端去解決!
如今介紹一種對於任何項目都通用的解決跨域的方法!
用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;
  proxy_passhttp://www.sohu.com/;
}

咱們就把sohu網站整個搬到咱們的8080:/sohu/目錄下了，咱們的javascript就能夠盡情調用其RESTFUL服務了。
順便說一下，rewrite^.+sohu/?(.)$ /$1 break; 這句命令中，$1表示(.)這個部分。第一對()內的參數是$1，第二對()內的參數就是$2，以此類推。