搜尋
首頁運維Nginxnginx怎麼解決跨域問題

nginx怎麼解決跨域問題

Jun 12, 2019 am 10:24 AM
nginx跨域

nginx怎麼解決跨域問題

如何用Nginx解決前端跨域問題?

前言

在開發靜態頁面時,類似Vue的應用,我們常會呼叫一些接口,這些接口極可能是跨域,然後瀏覽器就會報cross-origin問題不給調。

最簡單的解決方法,就是把瀏覽器設為忽略安全性問題,設定--disable-web-security。不過這種方式開發PC頁面到還好,如果是行動裝置頁面就不行了。

解決方法

使用Nginx轉送請求。把跨域的介面寫成調本域的接口,然後將這些接口轉送到真正的請求位址。

舉個栗子

例如我們在開發一個Vue應用。

原文:

偵錯頁面是:http://192.168.1.100:8080/

要求的介面是:http://ni .hao.sao/api/get/info

步驟一:

請求的介面是:http://192.168.1.100:8080/api/get/ info

PS:這樣就解決了跨域問題。

步驟二:

安裝好Nginx後,去到/usr/local/etc/nginx/目錄(這是Mac的),修改nginx.conf文件。

步驟三:

把預設的server設定註解掉。

在下面增加:

   server{
        listen 8888;
        server_name  192.168.1.100;
 
        location /{
            proxy_pass http://192.168.1.100:8080;
        }
 
        location /api{
            proxy_pass http://ni.hao.sao/api;
        }
    }

儲存後,啟動Nginx。

PS:並不需要太了解Nginx的配置,很簡單的。

步驟四:

訪問:http://192.168.1.100:8888/

#搞定。

PS:注意訪問的連接埠是‘8888’,有其他域的位址繼續加location就行了。

錯誤示範

我一開始不太懂Nginx的配置,以為可以如下配置。

    server{
        listen 8080;
        server_name  192.168.1.100;
 
        location /api{
            proxy_pass http://ni.hao.sao/api;
        }
    }

之所以這麼寫,是我認為這樣可以讓Nginx幫我監聽8080的請求,然後只轉發匹配的請求。我沒有意識到的是Nginx這麼寫後,是需要佔用8080埠的。

既然需要佔用端口,那也就不能再被其他相同協定的進程佔用,就導致開發的頁面無法以8080端口啟用。經同事提點,才想起這事情,換下思路,就有了最上面的方法。

總結

其實不只在開發調試時候能這麼幹,在生產環境也能這麼玩。利用Nginx轉送請求之後,就能夠讓所要部署的靜態頁面不需要放在跟請求介面同域的地方。

附錄

如果發現請求出現問題,且發現是Nginx的報錯,那隻需要找到Nginx的error.log,就可以知道原因。

前提需要在nginx.conf配置error.log:

error_log  logs/error.log;

error.log在Mac的位置:

/usr/local/Cellar/nginx/1.15.8/logs/error.log

更多Nginx相關知識,請造訪 Nginx使用教學專欄!

以上是nginx怎麼解決跨域問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
NGINX單元:架構及其工作原理NGINX單元:架構及其工作原理Apr 23, 2025 am 12:18 AM

NGINXUnit通過其模塊化架構和動態重配置功能提高了應用的性能和可管理性。 1)模塊化設計包括主控進程、路由器和應用進程,支持高效管理和擴展。 2)動態重配置允許在運行時無縫更新配置,適用於CI/CD環境。 3)多語言支持通過動態加載語言運行時實現,提升了開發靈活性。 4)高性能通過事件驅動模型和異步I/O實現,即使在高並發下也保持高效。 5)安全性通過隔離應用進程提高,減少應用間相互影響。

使用NGINX單元:部署和管理應用程序使用NGINX單元:部署和管理應用程序Apr 22, 2025 am 12:06 AM

NGINXUnit可用於部署和管理多種語言的應用。 1)安裝NGINXUnit。 2)配置它以運行不同類型的應用,如Python和PHP。 3)利用其動態配置功能進行應用管理。通過這些步驟,你可以高效地部署和管理應用,提升項目效率。

NGINX與Apache:Web服務器的比較分析NGINX與Apache:Web服務器的比較分析Apr 21, 2025 am 12:08 AM

NGINX更适合处理高并发连接,而Apache更适合需要复杂配置和模块扩展的场景。1.NGINX以高性能和低资源消耗著称,适合高并发。2.Apache以稳定性和丰富的模块扩展闻名,适合复杂配置需求。

NGINX單元的優勢:靈活性和性能NGINX單元的優勢:靈活性和性能Apr 20, 2025 am 12:07 AM

NGINXUnit通過其動態配置和高性能架構提升應用的靈活性和性能。 1.動態配置允許在不重啟服務器的情況下調整應用配置。 2.高性能體現在事件驅動和非阻塞架構以及多進程模型上,能夠高效處理並發連接和利用多核CPU。

NGINX與Apache:性能,可伸縮性和效率NGINX與Apache:性能,可伸縮性和效率Apr 19, 2025 am 12:05 AM

NGINX和Apache都是強大的Web服務器,各自在性能、可擴展性和效率上有獨特的優勢和不足。 1)NGINX在處理靜態內容和反向代理時表現出色,適合高並發場景。 2)Apache在處理動態內容時表現更好,適合需要豐富模塊支持的項目。選擇服務器應根據項目需求和場景來決定。

終極攤牌:nginx vs. apache終極攤牌:nginx vs. apacheApr 18, 2025 am 12:02 AM

NGINX適合處理高並發請求,Apache適合需要復雜配置和功能擴展的場景。 1.NGINX採用事件驅動、非阻塞架構,適用於高並發環境。 2.Apache採用進程或線程模型,提供豐富的模塊生態系統,適合複雜配置需求。

nginx行動:示例和現實應用程序nginx行動:示例和現實應用程序Apr 17, 2025 am 12:18 AM

NGINX可用於提升網站性能、安全性和可擴展性。 1)作為反向代理和負載均衡器,NGINX可優化後端服務和分擔流量。 2)通過事件驅動和異步架構,NGINX高效處理高並發連接。 3)配置文件允許靈活定義規則,如靜態文件服務和負載均衡。 4)優化建議包括啟用Gzip壓縮、使用緩存和調整worker進程。

NGINX單元:支持不同的編程語言NGINX單元:支持不同的編程語言Apr 16, 2025 am 12:15 AM

NGINXUnit支持多種編程語言,通過模塊化設計實現。 1.加載語言模塊:根據配置文件加載相應模塊。 2.應用啟動:調用語言運行時執行應用代碼。 3.請求處理:將請求轉發給應用實例。 4.響應返回:將處理後的響應返回給客戶端。

See all articles

熱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

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

熱工具

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!