跨越解決方案之nginx

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【跨越解決方案之nginx】

 

1.背景介紹

跨域，指的是瀏覽器不能執行其餘網站的腳本。它是由瀏覽器的同源策略形成的，是瀏覽器對javascript施加的安全限制。

所謂同源是指，域名，協議，端口相同。瀏覽器執行javascript腳本時，會檢查這個腳本屬於那個頁面，若是不是同源頁面，就不會被執行。

同源策略的目的，是防止黑客作一些作奸犯科的勾當。好比說，若是一個銀行的一個應用容許用戶上傳網頁，若是沒有同源策略，黑客能夠編寫一個登錄表單提交到本身的服務器上，獲得一個看上去至關高大上的頁面。黑客把這個頁面經過郵件等發給用戶，用戶誤認爲這是某銀行的主網頁進行登錄，就會泄露本身的用戶數據。而由於瀏覽器的同源策略，黑客沒法收到表單數據。

2.知識剖析

隨着如今開發的先後端分離，咱們只須要Server端告訴咱們Api URL便可，那麼這會產生一個問題：Ajax跨域。

配置nginx

listen     1008;   //監聽的窗口

server_name  localhost;   #監聽的地址

location /{

root   F:/WebstormProjects/skill-admin-html/branches/skill-admin-html-18.0.branch;  //根目錄

index  index.html index.htm;  //設置默認頁

try_files $uri $uri/ /index.html =404;

}

location /ajax/{

proxy_pass   http://120.92.4.210:10011/;  //服務器的地址

proxy_set_header            Host                            $host;

proxy_set_header            X-Real-IP                       $remote_addr;

proxy_set_header            X-Forwarded-For                 $proxy_add_x_forwarded_for;

}

3.常見問題

一、Nginx 常見錯誤

1.  端口占用問題

2.Nginx所在目錄有中文

三、502 Bad Gateway、503 Serveice Unavailable

四、 504 Gateway Timeout

4.解決方案

一、個人配置文件裏服務偵聽的是 80 端口，但80端口被佔用了，咱們更換端口就能夠了，

二、目錄是不能有中文

三、 通常緣由:後端服務沒法處理，業務中斷。

解決方法：從後端日誌獲取錯誤緣由，解決後端服務器問題。

四、通常緣由:後端服務器在超時時間內，未響應Nginx代理請求

解決方法：根據後端服務器實際處理狀況，調正後端請求超時時間。

5.編碼實戰

6.擴展思考

跨域的其餘解決方法

1.jsonp 須要目標服務器配合一個callback函數。

2.window.name+iframe 須要目標服務器響應window.name。

3.window.location.hash+iframe 一樣須要目標服務器做處理。

4.html5的 postMessage+ifrme 這個也是須要目標服務器或者說是目標頁面寫一個postMessage，主要側重於前端通信

5.CORS  須要服務器設置header ：Access-Control-Allow-Origin。

7.參考文獻

"http://www.cnblogs.com/liyongsan/p/6795851.html">nginx常見問題

http://www.cnblogs.com/gabrie...l">nginx的反向代理機制解決前端跨域問題