首頁 運維 Nginx 如何利用Nginx反向代理解決跨域問題

如何利用Nginx反向代理解決跨域問題

May 31, 2023 am 10:20 AM
nginx

問題

在先前的分享的跨域資源共享的文章中,有提到要注意跨域時,如果要發送cookie,access-control- allow-origin就不能設為*,必須指定明確的、與請求網頁一致的網域名稱。在此次專案開發中與他人協作中就遇到此類問題。

如何利用Nginx反向代理解決跨域問題

解決想法

  1. #一般來說,與後台利用cors跨域資源共享將access- control-allow-origin設定為訪問的網域即可,這個需要後台的配合,而且有些瀏覽器是不支援的。

  2. 基於與合作方後台的配合,利用nginx方向代理來滿足瀏覽器的同源策略來實現跨域

# #實作方法

反向代理程式概念

#反向代理程式(reverse proxy)方式是指以代理伺服器來接受internet上的連線請求,然後將請求轉送給內部網路上的伺服器;並將從伺服器上得到的結果傳回給internet上請求連線的客戶端,此時代理伺服器對外就表現為一個伺服器。反向代理伺服器對於客戶端而言它就像是原始伺服器,並且客戶端不需要進行任何特別的設定。客戶端向反向代理的命名空間(name-space)中的內容發送普通請求,接著反向代理將判斷向何處(原始伺服器)轉交請求,並將獲得的內容傳回給客戶端,就像這些內容原本就是它自己的一樣。

利用nginx反向代理實現跨域的步驟

#去下載套件建立nginx環境


如何利用Nginx反向代理解決跨域問題

修改nginx的設定文件,找到ngixn.conf文件,修改相關配置


http {
 include  mime.types;
 default_type application/octet-stream;

 sendfile  on;

 server {
  listen  8000; #监听8000端口,可以改成其他端口
  server_name localhost; # 当前服务的域名

  location /wili/api/ {
    proxy_pass http://chick.platform.deva.wili.us/api/; #添加访问路径录为/will/api的代理配置
    proxy_http_version 1.1;
  }
  
  location / {
    proxy_pass http://localhost:8001;
    proxy_http_version 1.1;
  }
  
  error_page 500 502 503 504 /50x.html;
  location = /50x.html {
   root html;
  }

 }

}
登入後複製

配置的解釋:

    ##由設定資訊可知,我們讓nginx監聽localhost的8000端口,網站a與網站b的訪問都是經過localhost的8000端口進行訪問。
  • 我們特殊配置了一個"/will/api"的訪問,使以"will/api」開頭的位址都轉到""進行處理。
  • 存取位址修改
  • 既然我們已經設定了nginx,那麼所有的存取都要走nginx,而不是走網站原本的位址(a網站localhost:8001,b網站)。所以要修改a網站中的請求介面換成。接下來啟動nginx,存取配置的8000即可


如何利用Nginx反向代理解決跨域問題
#需要注意的一點是nginx啟動可能會衝突連接埠造成啟動不成功,可在任務管理器查看是否啟動成功。

以上是如何利用Nginx反向代理解決跨域問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1655
14
CakePHP 教程
1413
52
Laravel 教程
1306
25
PHP教程
1252
29
C# 教程
1226
24
nginx在windows中怎麼配置 nginx在windows中怎麼配置 Apr 14, 2025 pm 12:57 PM

如何在 Windows 中配置 Nginx?安裝 Nginx 並創建虛擬主機配置。修改主配置文件並包含虛擬主機配置。啟動或重新加載 Nginx。測試配置並查看網站。選擇性啟用 SSL 並配置 SSL 證書。選擇性設置防火牆允許 80 和 443 端口流量。

docker容器名稱怎麼查 docker容器名稱怎麼查 Apr 15, 2025 pm 12:21 PM

可以通過以下步驟查詢 Docker 容器名稱:列出所有容器(docker ps)。篩選容器列表(使用 grep 命令)。獲取容器名稱(位於 "NAMES" 列中)。

docker怎麼啟動容器 docker怎麼啟動容器 Apr 15, 2025 pm 12:27 PM

Docker 容器啟動步驟:拉取容器鏡像:運行 "docker pull [鏡像名稱]"。創建容器:使用 "docker create [選項] [鏡像名稱] [命令和參數]"。啟動容器:執行 "docker start [容器名稱或 ID]"。檢查容器狀態:通過 "docker ps" 驗證容器是否正在運行。

怎麼查看nginx是否啟動 怎麼查看nginx是否啟動 Apr 14, 2025 pm 01:03 PM

確認 Nginx 是否啟動的方法:1. 使用命令行:systemctl status nginx(Linux/Unix)、netstat -ano | findstr 80(Windows);2. 檢查端口 80 是否開放;3. 查看系統日誌中 Nginx 啟動消息;4. 使用第三方工具,如 Nagios、Zabbix、Icinga。

docker怎麼創建容器 docker怎麼創建容器 Apr 15, 2025 pm 12:18 PM

在 Docker 中創建容器: 1. 拉取鏡像: docker pull [鏡像名] 2. 創建容器: docker run [選項] [鏡像名] [命令] 3. 啟動容器: docker start [容器名]

nginx怎麼查版本 nginx怎麼查版本 Apr 14, 2025 am 11:57 AM

可以查詢 Nginx 版本的方法有:使用 nginx -v 命令;查看 nginx.conf 文件中的 version 指令;打開 Nginx 錯誤頁,查看頁面的標題。

nginx怎麼配置雲服務器域名 nginx怎麼配置雲服務器域名 Apr 14, 2025 pm 12:18 PM

在雲服務器上配置 Nginx 域名的方法:創建 A 記錄,指向雲服務器的公共 IP 地址。在 Nginx 配置文件中添加虛擬主機塊,指定偵聽端口、域名和網站根目錄。重啟 Nginx 以應用更改。訪問域名測試配置。其他注意事項:安裝 SSL 證書啟用 HTTPS、確保防火牆允許 80 端口流量、等待 DNS 解析生效。

nginx服務器掛了怎麼辦 nginx服務器掛了怎麼辦 Apr 14, 2025 am 11:42 AM

當 Nginx 服務器宕機時,可執行以下故障排除步驟:檢查 nginx 進程是否正在運行。查看錯誤日誌以獲取錯誤消息。檢查 nginx 配置語法正確性。確保 nginx 具有訪問文件所需的權限。檢查文件描述符打開限制。確認 nginx 正在偵聽正確的端口。添加防火牆規則以允許nginx流量。檢查反向代理設置,包括後端服務器可用性。如需進一步幫助,請聯繫技術支持。

See all articles