天天看點

前後端分離之nginx代理實作跨域

nginx代理實作跨域

前言:最近面試,總是被問到什麼是跨域,怎麼解決跨域之類問題。其實很苦惱,對于一個前端來說,比較難去模拟一個跨域的場景,不懂背景,怎麼去得到一個真實的json資料呢?以下是個人的一些心得:

(其實一直以來一個人自學,進步不快,有時候遇到困難也很失落,最近通過慕課網,進步了很多,其實也是一個學習的途徑,挺好的)

以下為跨域問題解決辦法:

1.去慕課網觀看《ajax跨域完全講解》免費課程的,老師講得超詳細(分析了jsonp的不足,nginx的好處和使用)

2.按照視訊的方法,在本地修改hosts檔案,增加一條映射記錄:127.0.0.1 b.com

3.按照視訊的方法,配置nginx檔案(見下圖1)

4.在自己的電腦啟動一個本地的伺服器:啟用windows的iis服務,即是(Win7、win10如何搭建IIS本地伺服器網站:https://jingyan.baidu.com/article/2fb0ba40916a1c00f2ec5ff7.html)

為什麼要啟動本地的伺服器呢?其實是模拟真實的資料請求場景,我們平時都是前端通過一個url向背景伺服器請求資料的,如果前端的你,現在你如果不會背景的語言的話,最好就是用這個方法了。啟動本地iis伺服器,模拟和充當背景伺服器,當請求發生時,能夠傳回資料。其實這個過程和實際的工作場景是一樣的。在本地伺服器的根目錄建立一個data.json的資料,等下就可以通過ajax方法調用到了。(具體的調用方式,自己寫一個html例子demo.html調用吧,直接用jquery的$.ajax()也比較友善)

5.啟動nginx.exe

6.通過demo.html通路即可

其實不是很難,隻是過程有點麻煩,如果看不懂的小夥伴,可以評論。可以給你提供源碼,哈哈哈!

如有不妥處,請大神指出!

以下為nginx檔案配置:圖1

前後端分離之nginx代理實作跨域

實作跨域效果圖:

前後端分離之nginx代理實作跨域

繼續閱讀