前端跨域解決方案(6):Nginx

1 Nginx 核心

Nginx 是一個開源的高性能 HTTP 和反向代理服務器,以輕量級、高并發處理能力和低資源消耗著稱。除作為 Web 服務器外,還可充當郵件代理服務器和通用的 TCP/UDP 代理服務器,廣泛應用于現代 Web 架構中。

在 Windows 系統中使用 Nginx 時,命令行操作與類 Unix 系統存在差異,以下是基本操作:

1.1 環境準備

  1. 下載 Nginx for Windows 安裝包(需注意 Windows 版本僅支持穩定版,非主線開發版)。

  2. 解壓至指定目錄(如?C:\nginx),目錄結構包含?conf(配置文件)、html(靜態資源)等核心文件夾。

1.2 常用命令操作

1.2.1 啟動 Nginx

# 切換到Nginx安裝目錄
cd C:\nginx# 啟動Nginx服務
start nginx

1.2.2 停止 Nginx

# 強制停止服務
nginx -s stop# 優雅停止服務(處理完當前請求后停止)
nginx -s quit

1.2.3 重啟 Nginx

# 先停止服務
nginx -s stop# 再啟動服務
start nginx

1.2.4 重載配置

# 當修改配置文件后,無需重啟服務即可使配置生效
nginx -s reload

2 Nginx 跨域方案

2.1 CORS 跨域資源共享方案

Nginx 可通過配置響應頭實現 CORS(Cross-Origin Resource Sharing),解決瀏覽器同源策略限制。

2.1.1?add_header 指令配置

在 Nginx 配置文件中(通常位于安裝目錄下的?conf\nginx.conf),可以使用?add_header指令添加跨域相關響應頭:

server {listen 8080;server_name localhost;location ~ \.json$ {root   data;# 安全建議:明確指定允許的域名而非使用通配符,*表示允許所有域名訪問add_header 'Access-Control-Allow-Origin' 'http://yourdomain.com';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';# 預檢請求緩存時間(20天)add_header 'Access-Control-Max-Age' 1728000;# 允許瀏覽器在跨域請求中攜帶憑據(如cookies),需注意:此時Access-Control-Allow-Origin不可使用通配符# add_header 'Access-Control-Allow-Credentials' 'true';# 處理OPTIONS預檢請求if ($request_method = 'OPTIONS') {return 204;}}
}

2.1.2?前端請求示例 (users.html)

下面是一個前端頁面示例,使用 Fetch API 請求 JSON 數據:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Nginx跨域示例</title>
</head>
<body><script>// 立即執行的異步函數(async function () {try {// 發送GET請求到Nginx服務器const response = await fetch('http://localhost:8080/users.json', {method: 'GET',headers: {'Accept': 'application/json'}})// 解析響應為JSON格式const data = await response.json();// 打印獲取到的數據console.log('請求響應:', data);} catch (error) {// 錯誤處理console.error('請求出錯:', error);}})();</script>
</body>
</html>

數據文件示例 (users.json) 如下:

[{"id":1,"name":"張三"}]

2.2 反向代理方案

除了直接配置 CORS 響應頭,還可以通過 Nginx 反向代理來解決跨域問題,這種方法可將跨域請求轉為同域請求,規避瀏覽器同源策略,此方法在微服務架構中尤為常見。

2.2.1 Nginx 代理配置

在 Nginx 配置文件中添加以下代理規則:

server {listen 8080;server_name localhost;# 匹配以/api開頭的URL路徑location /api {# 將請求代理到本地4000端口的服務(注意:proxy_pass末尾是否添加斜杠會影響路徑拼接)proxy_pass http://localhost:4000;# 常用代理配置項(傳遞客戶端真實信息)proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}
}

2.2.2 后端服務示例 (serverb.js)

使用 Express 框架創建一個簡單的后端服務:

// serverb.js
const express = require('express');
const app = express();
const users = [{id:1, name:'張三'}];// 處理API請求(注意:接口路徑需與Nginx代理規則匹配)
app.get('/api/users', (req, res) => {res.json(users);
});const port = 4000;
app.listen(port, () => {console.log(`后端服務運行在 http://localhost:${port}`);
});

2.2.3 前端通過代理請求數據

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Nginx代理跨域示例</title>
</head>
<body><script>(async function () {try {// 通過Nginx代理訪問后端服務const response = await fetch('http://localhost:8080/api/users', {method: 'GET',headers: {'Accept': 'application/json'}})const data = await response.json();console.log('通過代理獲取的數據:', data);} catch (error) {console.error('代理請求出錯:', error);}})();</script>
</body>
</html>

2.3 兩種跨域方案對比

維度CORS 方案反向代理方案
核心原理瀏覽器基于響應頭允許跨域將跨域請求轉為同域請求
配置位置Nginx 響應頭配置(add_headerNginx 代理規則配置(proxy_pass
適用場景前后端域名不同,需瀏覽器直接跨域前端與 Nginx 同域名,后端多服務部署
安全性需嚴格控制Allow-Origin,避免通配符前端無跨域風險,Nginx 可統一鑒權
性能影響存在預檢請求(OPTIONS)額外開銷無預檢開銷,性能更優
前端依賴需前端請求配合 CORS 規則(如憑據設置)前端無需特殊處理,按同域請求即可

本文系統介紹了 Nginx 在 Windows 環境下的基礎操作,以及兩種主流跨域解決方案:通過add_header配置 CORS 響應頭和基于反向代理的跨域處理機制。在實際開發中,可依據項目場景靈活選擇方案:

  • 當前后端域名不同且需瀏覽器直接訪問跨域資源時,優先采用 CORS 方案,但需嚴格限定域名白名單,避免通配符濫用帶來的安全風險。

  • 若項目采用微服務架構,或需要集中處理請求轉發、負載均衡及緩存策略,反向代理方案更為高效 —— 它通過將跨域請求轉換為同域請求,從根本上規避瀏覽器同源策略限制。

Nginx 憑借高性能與靈活配置特性,成為跨域問題的理想解決方案,同時在負載均衡、緩存優化等場景中也能發揮核心作用。實際使用時,建議養成定期備份配置文件的習慣,修改配置后通過nginx -t命令校驗語法正確性,再通過nginx -s reload平滑重載配置,確保服務穩定運行。通過 Nginx 處理跨域問題,既能發揮其高并發處理優勢,又能簡化前后端架構設計,是現代 Web 開發中不可或缺的基礎技術方案。

下一章將介紹 Node中間件?方案 ,敬請期待!

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/87996.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/87996.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/87996.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

C++智能指針編程實例

智能指針是C11引入的重要特性&#xff0c;用于自動管理動態分配的內存&#xff0c;防止內存泄漏。下面介紹幾種高級智能指針編程實例。 1. 共享所有權模式 (shared_ptr) 循環引用問題及解決方案 #include <memory> #include <iostream>class B; // 前向聲明clas…

單元測試總結

一、測試方案: 單元測試方案應包括以下步驟: 1.理解代碼結構:仔細閱讀代碼,理解程序的結構、邏輯和算法。 2.制定測試目標:明確你想要測試的功能和輸出結果; 3.撰寫測試用例:編寫涵蓋所有測試目標的測試用例; 4.執行測試:運行測試用例以驗證功能的正確性; 5.編寫報告:根據測試…

Spring面向切面編程AOP(2)

前置通知&#xff08;Before Advice&#xff09; 前置通知在目標方法執行之前被調用&#xff0c;常用于執行一些預處理邏輯&#xff0c;例如權限驗證、參數校驗等。在 Spring 配置文件中&#xff0c;前置通知通過<aop:before>標簽進行配置&#xff0c;以下是一個典型的示…

設備故障預測與健康管理技術:從數據到決策的工業智能進化之路?

在工業 4.0 與智能制造浪潮的推動下&#xff0c;設備故障預測與健康管理&#xff08;Prognostics and Health Management, PHM&#xff09;技術已成為企業實現數字化轉型的核心驅動力。據統計&#xff0c;制造業中設備非計劃停機 1 小時的平均損失高達 25 萬美元&#xff0c;而…

RabbitMQ從入門到實踐:消息隊列核心原理與典型應用場景

在現代應用開發中&#xff0c;系統各部分之間的通信至關重要。這就是像RabbitMQ這樣的消息代理發揮作用的地方。無論您是在構建微服務架構、實現任務隊列&#xff0c;還是開發實時聊天應用程序&#xff0c;RabbitMQ都可能成為改變游戲規則的工具。本文將深入探討RabbitMQ是什么…

基于Spring Boot和Vue的網上軍事論壇設計與實現

目錄 一.&#x1f981;前言二.&#x1f981;開源代碼與組件使用情況說明三.&#x1f981;核心功能1. ?算法設計2. ?Java開發語言3. ?Redis數據庫4. ?部署項目 四.&#x1f981;演示效果1. 管理員模塊1.1 用戶管理1.2 內容審核1.3 權限分配1.4 菜單管理1.5 字典管理 2. 用戶…

LLMs基礎學習(八)強化學習專題(6)

LLMs基礎學習&#xff08;八&#xff09;強化學習專題&#xff08;6&#xff09; 文章目錄 LLMs基礎學習&#xff08;八&#xff09;強化學習專題&#xff08;6&#xff09;深度強化學習&#xff08;DQN&#xff09;DQN 起源&#xff1a;《Playing Atari with Deep Reinforceme…

JVM(10)——詳解Parallel垃圾回收器

Parallel 垃圾回收器&#xff08;也稱為 吞吐量優先收集器&#xff09;。它是 Java 早期&#xff08;特別是 JDK 8 及之前&#xff09;在多核處理器上的默認垃圾回收器&#xff0c;其核心設計目標是最大化應用程序的吞吐量。 一、Parallel 回收器的定位與設計目標 核心目標&am…

MySQL(91)什么是分布式數據庫?

分布式數據庫是一種將數據存儲在多個物理位置的數據庫系統。這些位置可能分布在不同的服務器、數據中心甚至地理位置。分布式數據庫系統允許數據的存儲、處理和訪問分布在多個節點上&#xff0c;以提高數據的可用性、可靠性、可擴展性和性能。 1. 分布式數據庫的特點 1.1 數據…

Java事務失效(面試題)的常見場景

1. 方法非public修飾 原理&#xff1a; Spring AOP代理&#xff08;CGLIB或JDK動態代理&#xff09;默認無法攔截非public方法。 示例&#xff1a; Service public class UserService {Transactionalvoid updateUser() { // 非public方法// 事務不會生效&#xff01;} } 修…

GitHub 趨勢日報 (2025年06月20日)

&#x1f4ca; 由 TrendForge 系統生成* | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日報中的項目描述已自動翻譯為中文 &#x1f4c8; 今日獲星趨勢圖 今日獲星趨勢圖 1810 data-engineer-handbook 373 n8n 295 anthropic-cookbook 291 automatisch…

qt常用控件--01

文章目錄 qt常用控件--01上一篇文章的補充windowTitle屬性windowIcon屬性windowOpaCity屬性cursor屬性font屬性結語 很高興和大家見面&#xff0c;給生活加點impetus&#xff01;&#xff01;開啟今天的編程之路&#xff01;&#xff01; 今天我們進一步c11中常見的新增表達 作…

C++ 中 string 類的解析及簡易自我實現

目錄 引言 標準庫中的 string 類 功能概述 常見操作示例 自我實現簡易 string 類 代碼結構概述 1. String11.h 頭文件 類的成員變量 迭代器相關 構造函數和析構函數 基本訪問和修改方法 賦值運算符重載 內存管理和擴容 以下代碼在.cpp文件中解析: 2. String11.…

計算機的性能指標(選擇題0~1題無大題)

存儲器的性能指標 總容量存儲單元個數*存儲字長 bit 例&#xff1a;MAR16位&#xff0c;MDR16位 總容量2的16次方*16bit 補充&#xff1a; n個二進制位就有2的n次方不同的狀態 一般描述文件大小容量單位 2的10次方&#xff1a;K 2的20次方&#xff1a;M 2的…

React 核心原理與Fiber架構

目錄 一、虛擬 DOM 二、Diffing 算法 三、Fiber 架構 四、渲染流程 1. Render 階段&#xff08;可中斷異步過程&#xff09; 2. Commit 階段&#xff08;同步不可中斷&#xff09; 五、時間切片&#xff08;Time Slicing&#xff09; 六、核心流程步驟總結 1. 狀態更新…

【破局痛點,賦能未來】領碼 SPARK:鑄就企業業務永續進化的智慧引擎—— 深度剖析持續演進之道,引領數字化新范式

摘要 在瞬息萬變的數字時代&#xff0c;企業對業務連續性、敏捷創新及高效運營的需求日益迫切。領碼 SPARK 融合平臺&#xff0c;秉持“持續演進”這一核心理念&#xff0c;以 iPaaS 與 aPaaS 為雙擎驅動&#xff0c;深度融合元數據驅動、智能端口調度、自動化灰度切換、AI 智…

掌握C++核心特性

目標&#xff1a; 掌握C核心特性&#xff0c;為嵌入式開發打基礎 好的&#xff0c;我來為你詳細梳理一下 繼承與多態、虛函數 相關的知識點&#xff0c;包括單繼承、多繼承、虛函數表機制、純虛函數與抽象類、動態綁定。以下內容適合中等難度層次的理解&#xff0c;便于考試復…

python的高校教師資源管理系統

目錄 技術棧介紹具體實現截圖系統設計研究方法&#xff1a;設計步驟設計流程核心代碼部分展示研究方法詳細視頻演示試驗方案論文大綱源碼獲取/詳細視頻演示 技術棧介紹 Django-SpringBoot-php-Node.js-flask 本課題的研究方法和研究步驟基本合理&#xff0c;難度適中&#xf…

Java Collections工具類:高效集合操作

Collections工具類概述 Collections是Java提供的集合操作工具類&#xff0c;位于java.util包中&#xff0c;包含大量靜態方法&#xff0c;用于對List、Set、Map等集合進行排序、查找、替換、同步化等操作。 常用方法及代碼示例 排序操作 sort(List<T> list)&#xff1a…

vue指令總結

vue指令總結 一、總述 二、代碼實現&#xff08;內含大量注釋&#xff09; <!DOCTYPE html> <html> <head><meta charset"utf-8"><title>vue入門</title><!-- 使用Vue 3官方CDN --><script src"https://unpkg.c…