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

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實(shí)戰(zhàn)】【擴(kuò)展思考】【更多討論】【參考文獻(xiàn)】

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

【跨越解決方案之nginx】

?

1.背景介紹

跨域，指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對javascript施加的安全限制。

所謂同源是指，域名，協(xié)議，端口相同。瀏覽器執(zhí)行javascript腳本時，會檢查這個腳本屬于那個頁面，如果不是同源頁面，就不會被執(zhí)行。

同源策略的目的，是防止黑客做一些做奸犯科的勾當(dāng)。比如說，如果一個銀行的一個應(yīng)用允許用戶上傳網(wǎng)頁，如果沒有同源策略，黑客可以編寫一個登陸表單提交到自己的服務(wù)器上，得到一個看上去相當(dāng)高大上的頁面。黑客把這個頁面通過郵件等發(fā)給用戶，用戶誤認(rèn)為這是某銀行的主網(wǎng)頁進(jìn)行登陸，就會泄露自己的用戶數(shù)據(jù)。而因?yàn)闉g覽器的同源策略，黑客無法收到表單數(shù)據(jù)。

2.知識剖析

隨著現(xiàn)在開發(fā)的前后端分離，我們只需要Server端告訴我們Api URL即可，那么這會產(chǎn)生一個問題：Ajax跨域。

配置nginx

listen ? ? 1008; ? //監(jiān)聽的窗口

server_name ?localhost; ? #監(jiān)聽的地址

location /{

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

index ?index.html index.htm; ?//設(shè)置默認(rèn)頁

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

}

location /ajax/{

proxy_pass ? http://120.92.4.210:10011/; ?//服務(wù)器的地址

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 常見錯誤

?端口占用問題

2.Nginx所在目錄有中文

3、502 Bad Gateway、503 Serveice Unavailable

4、 504 Gateway Timeout

4.解決方案

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

2、目錄是不能有中文

3、 一般原因:后端服務(wù)無法處理，業(yè)務(wù)中斷。

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

4、一般原因:后端服務(wù)器在超時時間內(nèi)，未響應(yīng)Nginx代理請求

解決方法：根據(jù)后端服務(wù)器實(shí)際處理情況，調(diào)正后端請求超時時間。

5.編碼實(shí)戰(zhàn)

6.擴(kuò)展思考

跨域的其他解決方法

1.jsonp 需要目標(biāo)服務(wù)器配合一個callback函數(shù)。

2.window.name+iframe 需要目標(biāo)服務(wù)器響應(yīng)window.name。

3.window.location.hash+iframe 同樣需要目標(biāo)服務(wù)器作處理。

4.html5的 postMessage+ifrme 這個也是需要目標(biāo)服務(wù)器或者說是目標(biāo)頁面寫一個postMessage，主要側(cè)重于前端通訊

5.CORS ?需要服務(wù)器設(shè)置header ：Access-Control-Allow-Origin。

7.參考文獻(xiàn)

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

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

總結(jié)

以上是生活随笔為你收集整理的跨越解决方案之nginx的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。