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

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

八個(gè)方面深度解析前端知識(shí)/技能，本篇分享的是：

【跨越解決方案之nginx】

?

1.背景介紹

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

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

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

2.知識(shí)剖析

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

配置nginx

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

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

location /{

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

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

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.常見(jiàn)問(wèn)題

1、Nginx 常見(jiàn)錯(cuò)誤

?端口占用問(wèn)題

2.Nginx所在目錄有中文

3、502 Bad Gateway、503 Serveice Unavailable

4、 504 Gateway Timeout

4.解決方案

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

2、目錄是不能有中文

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

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

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

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

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

6.擴(kuò)展思考

跨域的其他解決方法

1.jsonp 需要目標(biāo)服務(wù)器配合一個(gè)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 這個(gè)也是需要目標(biāo)服務(wù)器或者說(shuō)是目標(biāo)頁(yè)面寫(xiě)一個(gè)postMessage，主要側(cè)重于前端通訊

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

7.參考文獻(xiàn)

"http://www.cnblogs.com/liyongsan/p/6795851.html">nginx常見(jiàn)問(wèn)題

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

總結(jié)

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

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