Nginx解決前端訪問資源跨域問題

菜鳥入門 發表於 2021-01-10

被前端跨域問題折磨快2天后,終於用ngnx的方式解決了,所以在此總結下。

該篇只探討如何用Ngnx解決跨域問題,對於原理不作討論。

 

1、首先介紹Windows環境下Nignx的相關命令操作

nginx常用命令:

驗證配置是否正確: nginx -t

檢視Nginx的版本號:nginx -V

啟動Nginx:start nginx

快速停止或關閉Nginx:nginx -s stop

正常停止或關閉Nginx:nginx -s quit

配置檔案修改重灌載命令:nginx -s reload

 

在停止ngix後,會自動刪除/logs目錄下的nginx.pid 

可以使用命令 nginx -c conf/nginx.conf 重新建立 或者 再次啟動nginx

 

檢視nignx 監聽埠 是否啟動成功

netstat -ano | findstr 埠號 

 

解決關閉nignx後 埠仍在監聽中 

1、netstat -ano | findstr 埠號   #獲取到PID

2、 tasklist | findstr "PID"  #命令找到nginx程式資訊

3、 taskkill /f /t /im nginx.exe #結束nginx程式

 

2、介紹如何配置Nignx 解決跨域問題

前端ip埠號:http://localhost:8080/

後端ip埠號:http://localhost:8082/

 

現在我們在不做跨域設定時,前端請求如下

1 uni.request({                        
2       url:'http://localhost:8082/ApiController/test',
3       success:(res)=>{
4       console.log(res.data)
5       },
6 })

訪問地址:'http://localhost:8082/ApiController/test',就會出現

Nginx解決前端訪問資源跨域問題

 

 

那麼我們進行Nignx配置

編輯   /config/nginx.conf此檔案

1)新增頭資訊,在nginx.conf配置檔案http塊中新增跨域訪問配置

add_header Access-Control-Allow-Origin *; //允許所有域名跨域訪問代理地址
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET; //跨域請求訪問請求方式,

2)設定反向代理

server {
        listen       80;   #配置nignx的監聽埠
        server_name  localhost;  #配置nignx的監聽地址
        location /ApiController{    #監聽地址 以/ApiController開頭的地址
            proxy_pass http://localhost:8082; #轉發地址
        }
}    

此時配置後我們前端訪問url

http://localhost:8082/ApiController/test  應修改為 http://localhost:80/ApiController/test   

#此時監聽

以localhost為域名

以80為埠

以/ApiController為地址開頭

才會進行地址轉發

1 uni.request({                        
2       url:'http://localhost:80/ApiController/test',
3       success:(res)=>{
4       console.log(res.data)
5       },
6 })

結果:(訪問成功)

Nginx解決前端訪問資源跨域問題