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，不需要修改任何代碼，并且不會影響服務器性能。