【nginx】nginx解決跨域詳解


使用場景:本地運行一個項目,但是要訪問外域的api接口,存在跨域問題,解決方式有很多,但我嘗試用nginx解決,搜索了網上文章后再加上嘗試終於成功, 其中一些注意事項和大家分享一下。

一.window下使用nginx

重點:掌握重啟和關閉nginx的命令

1.安裝:

在官網上選擇適合的版本,我選的是window版本的: http://nginx.org/en/download.html,下載安裝文件后解壓,可以看到這樣子:

(不用雙擊nginx.exe)

配置文件路徑: conf / nginx.conf

 

2.在命令行執行開啟、關閉、重啟命令:

開啟:start nginx

關閉:nginx.exe -s quit

重啟:nginx.exe -s reload  (修改配置文件后需要重啟才生效)

 

啟動成功后,訪問 localhost:80可以看到這個界面 :

 

二. nginx.conf文件配置

 情況:我本地運行一個項目,訪問地址是  http://localhost:8888 用的是8888端口,我配置nginx使用的是80端口,也就是http://localhost:80  就可以訪問到本地nginx服務器,我希望 http://localhost:8888 可以訪問到  http://api.zhuishushenqi.com  這個域名下的接口,如果沒有通過nginx中轉的話,訪問時報跨域錯誤。那么我是怎么解決的呢,請一步一步來:

1. nginx.conf文件配置:

 說明:

(1)nginx的訪問端口可以修改為沒被占用的其他端口,這里設置nginx的訪問路徑是  http://localhost:80

(2)注意這里需要添加 proxy_pass 為本地運行的項目地址 http://localhost:8888 !!!  當訪問 http://localhost:80 的時候,location會匹配 ' / ' 到文件夾根目錄下的index.html文件,但這里添加  proxy_pass 后,訪問 http://localhost:80  的時候會代理到 http://localhost:8888,而且你的訪問路徑顯示的還是 http://localhost:80 ,內容是 http://localhost:8888的

(3)這里location匹配的是 訪問  http://localhost:80/apis/.*   路徑的時候,在proxy_pass填上需要用到的外域api地址  http://api.zhuishushenqi.com/  ,此時就相當於訪問:

http://api.zhuishushenqi.com/ .*  ,但實際上顯示在你眼前的還是原來路徑: http://localhost:80/apis/.*   ,只是你訪問這個原路徑的時候nginx自動幫你代理到你想要訪問的api路徑 。但這里有個很重要的細節需要注意: 匹配路徑  /apis/  和代理路徑  http://api.zhuishushenqi.com/  后面的斜杠統統都不能少!!!任何一個少了都不行,不信試試,這是nginx的規則。

 

修改完 nginx.conf 文件后,需要重啟nginx ,才會生效 !!!

 

2.本地項目配置和訪問方式:

本地項目中,我訪問接口以這樣的格式: /apis/.*,然后運行本地項目后,訪問 http://localhost:80 地址,而不是 http://localhost:8888 。

直接訪問 http://localhost:8888 不會通過 nginx中轉,而訪問 http://localhost:80 通過nginx中轉解決了跨域問題。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM