1. 程式人生 > >關於使用nginx反向代理解決跨域問題

關於使用nginx反向代理解決跨域問題

nginx配置 bubuko lis log 圖片 .exe 完美解決 star tar

1.何為跨域問題

跨域本人經過兩天的磨練,大量地翻閱網上資料,通俗地講,就是,同一ip,同一域名,不同端口下,需要互相訪問,需要cookie的傳遞以及數據的獲取。

一般在項目中,前後端完全分離,因此訪問的端口號不同,比如:localhost:8090(前端)發送到localhost:8001(後端)請求數據,此時前後端就出現了

跨域問題。

2.如何解決跨域問題

網上的博文都大多都能解決這個問題,比如本人在之前的隨筆中,https://www.cnblogs.com/mollie-x/p/10449686.html;記錄過,其中前4種都能基本解決,

但是這4種雖然可以讓前後端實現數據交互,但是cookie前後端還是不通,還是沒有完全解決,因此,也一直沒有嘗試第5種,nginx,這個東西是可以完全解決

跨域問題的,不但能前後端數據交互,而且cookie前後端也可以相互獲取,完美地解決了跨域問題。

3.nginx到底怎麽解決跨域問題的

3.1首先,自己安裝好nginx, 到nginx官網上下載相應的安裝包,https://www.cnblogs.com/qfb620/p/5508468.html;

技術分享圖片

3.2下載好後將其放置在自己心儀的位置,解壓出來,

技術分享圖片

3.3將自己的前端項目打包好放置在html文件下,

技術分享圖片

3.4修改conf文件夾下的nginx.conf文件

技術分享圖片

3.4在該文件中加入如下配置

location /apis {
rewrite ^.+apis/?(.*)$ /$1 break;

include uwsgi_params;
proxy_pass http://localhost:8001;
}

技術分享圖片

其中/apis可以自己定義,這個相當於http://localhost:8001;在前端中請求的url中將http://localhost:8001修改為/apis,

當前端發送請求的時候,比如本來發送的url地址為http://localhost:8001/login,要使用nginx,就將url地址修改為/apis/login即可

上面配置中的proxy_pass 為自己的請求的後端域名或ip地址。

至此nginx配置完畢。

技術分享圖片

3.5雙擊nginx.exe或者使用cmd到該目錄使用start nginx.exe啟動nginx,

技術分享圖片

並且,nginx.conf中listen為需要請求的端口號,自己可以根據需要修改

3.6啟動完畢,打開網址http://localhost:8888;即可訪問自己的項目,完美解決跨域問題。

關於使用nginx反向代理解決跨域問題