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

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

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

【跨越解決方案之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.常見問題

1、Nginx 常見錯誤

1. ?端口占用問題

2.Nginx所在目錄有中文

3、502 Bad Gateway、503 Serveice Unavailable

4、 504 Gateway Timeout

4.解決方案

1、我的配置文件里服務偵聽的是 80 端口，但80端口被占用了，我們更換端口就可以了，

2、目錄是不能有中文

3、 一般原因:后端服務無法處理，業務中斷。

解決方法：從后端日志獲取錯誤原因，解決后端服務器問題。

4、一般原因:后端服務器在超時時間內，未響應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的反向代理機制解決前端跨域問題