nginx跨域訪問配置的幾種方法實現

更新時間：2025年12月08日 10:58:38 作者：猩火燎猿

本文詳細介紹了Nginx跨域配置方法,包括基本配置、只允許指定域名、攜帶Cookie的跨域、動態(tài)設置允許的Origin、支持不同路徑的跨域控制、靜態(tài)資源跨域以及根據請求方法細分CORS策略,感興趣的可以了解一下

一、基本跨域配置
二、只允許指定域名跨域
三、完整示例
四、配置后重載 nginx
五、注意事項
六、支持攜帶 Cookie 的跨域配置
七、根據請求頭動態(tài)設置允許的 Origin
八、常見問題排查
九、nginx 跨域配置模板（推薦）
十、針對不同路徑/接口做跨域控制
十一、靜態(tài)資源跨域（如圖片、字體、JS/CSS）
十二、根據請求方法細分 CORS 策略
十三、反向代理多后端的跨域配置
十四、nginx 1.7.5 及以上版本的 always 參數
十五、安全建議
十六、調試技巧
十七、完整多場景配置模板

一、基本跨域配置

在 nginx 的 location 塊中添加以下內容：

location /api/ {
    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
    add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization' always;
 
    # 處理預檢請求（OPTIONS）
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }
 
    # 其他反向代理/靜態(tài)資源配置...
    proxy_pass http://backend-server;
}

說明：

Access-Control-Allow-Origin：允許哪些域訪問，* 表示所有域。
Access-Control-Allow-Methods：允許的 HTTP 方法。
Access-Control-Allow-Headers：允許的請求頭。
OPTIONS 方法用于處理 CORS 預檢請求，返回 204 No Content。

二、只允許指定域名跨域

如果只允許某個域（如 https://www.example.com）跨域：

add_header 'Access-Control-Allow-Origin' 'https://www.example.com' always;

三、完整示例

假設你有一個前端（端口 8080）和后端（端口 8000），nginx 代理 /api/ 到后端：

server {
    listen 80;
    server_name your.domain.com;
 
    location /api/ {
        proxy_pass http://127.0.0.1:8000;
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
        add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization' always;
 
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }
    }
}

四、配置后重載 nginx

每次修改配置后，記得重載 nginx：

nginx -s reload

五、注意事項

如果后端也設置了 CORS，可能會有沖突，建議只在一個地方設置。
如果需要攜帶 cookie，Access-Control-Allow-Origin 不能為 *，必須指定具體域名，并加上 Access-Control-Allow-Credentials: true。

六、支持攜帶 Cookie 的跨域配置

如果你需要前端跨域請求時攜帶 cookie（如登錄態(tài)），CORS 需要特殊配置：

Access-Control-Allow-Origin 不能為 *，必須指定具體的域名。
需要加上 Access-Control-Allow-Credentials: true。

示例：

location /api/ {
    proxy_pass http://127.0.0.1:8000;
 
    add_header 'Access-Control-Allow-Origin' 'https://www.example.com' always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
    add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization' always;
 
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }
}

前端請求時需要設置：

fetch('https://api.example.com/api/', {
  credentials: 'include', // 允許攜帶 cookie
  // 其他參數
})

七、根據請求頭動態(tài)設置允許的 Origin

有時你希望根據請求頭 Origin 動態(tài)設置允許的域名，可以用 nginx 的變量：

location /api/ {
    proxy_pass http://127.0.0.1:8000;
 
    if ($http_origin ~* "^https://(www\.example\.com|other\.domain\.com)$") {
        add_header 'Access-Control-Allow-Origin' "$http_origin" always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
    }
 
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
    add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization' always;
 
    # 處理預檢請求
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }
}

八、常見問題排查

add_header 不生效？
- 確認 always 關鍵字已加上。
- 確認沒有被其他配置覆蓋。
- 確認 location 塊沒有被其他 server/location 塊覆蓋。
OPTIONS 請求未返回 204？
- 檢查 if 語句是否正確。
- 檢查是否被后端攔截。
前端報錯：CORS header ‘Access-Control-Allow-Origin’ missing？
- 檢查響應頭是否包含該字段。
- 用瀏覽器開發(fā)者工具 Network 檢查響應頭。
攜帶 cookie 時跨域失??？
- 確認 Access-Control-Allow-Origin 不是 *，而是具體域名。
- 確認 Access-Control-Allow-Credentials: true 已設置。
- 前端 fetch/axios 需配置 credentials。

九、nginx 跨域配置模板（推薦）

可以將以下內容作為通用模板：

location /api/ {
    proxy_pass http://backend-server;
 
    # 支持跨域
    set $cors '';
    if ($http_origin ~* '^https://(www\.example\.com|other\.domain\.com)$') {
        set $cors 'true';
    }
 
    if ($cors = 'true') {
        add_header 'Access-Control-Allow-Origin' "$http_origin" always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
    }
 
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
    add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization' always;
 
    # 預檢處理
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }
}

十、針對不同路徑/接口做跨域控制

有時你只希望對部分接口（如 /api/）開放跨域，對其他接口（如 /admin/）不開放，可以這樣配置：

server {
    listen 80;
    server_name your.domain.com;
 
    # 只對 /api/ 開放跨域
    location /api/ {
        proxy_pass http://backend-api;
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
        add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization' always;
 
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }
    }
 
    # /admin/ 不開放跨域
    location /admin/ {
        proxy_pass http://backend-admin;
        # 不添加跨域相關 header
    }
}

十一、靜態(tài)資源跨域（如圖片、字體、JS/CSS）

如果你希望靜態(tài)資源（如圖片、字體文件等）可以被其他域引用，需為靜態(tài)資源 location 添加 CORS 響應頭：

location /static/ {
    root /var/www/html;
    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept' always;
}

注意：如果你希望字體文件可被第三方引用，必須加上 Access-Control-Allow-Origin，否則會有跨域問題。

十二、根據請求方法細分 CORS 策略

有時你希望 GET/POST/PUT/DELETE 允許跨域，而 PATCH 不允許，可以這樣寫：

location /api/ {
    proxy_pass http://backend-server;
 
    if ($request_method ~* "GET|POST|PUT|DELETE|OPTIONS") {
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
        add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization' always;
    }
 
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }
}

十三、反向代理多后端的跨域配置

如果 nginx 代理多個后端（如 /api1/、/api2/），每個后端都需要跨域：

location /api1/ {
    proxy_pass http://backend1;
    add_header 'Access-Control-Allow-Origin' '*' always;
    # ...同上
}
 
location /api2/ {
    proxy_pass http://backend2;
    add_header 'Access-Control-Allow-Origin' '*' always;
    # ...同上
}

十四、nginx 1.7.5 及以上版本的 always 參數

確保你用的 nginx 版本支持 always 參數，否則有些 header 在 4xx/5xx 狀態(tài)下不會返回。

十五、安全建議

生產環(huán)境不要使用 *，要指定具體域名。
不建議在 / 根路徑全局添加 CORS，容易引發(fā)安全隱患。
如需支持多域名跨域，推薦用變量和正則動態(tài)判斷。
如果接口涉及敏感數據，務必開啟認證和 HTTPS。

十六、調試技巧

用 Chrome/Firefox 開發(fā)者工具的 Network 面板查看 Response Headers，確認 CORS 頭是否正確返回。
使用 curl -i 命令直接發(fā)起跨域請求，檢查響應頭。
檢查 nginx 日志（access.log 和 error.log）排查問題。

十七、完整多場景配置模板

server {
    listen 80;
    server_name your.domain.com;
 
    # 靜態(tài)資源
    location /static/ {
        root /var/www/html;
        add_header 'Access-Control-Allow-Origin' '*' always;
    }
 
    # API1 跨域
    location /api1/ {
        proxy_pass http://backend1;
        add_header 'Access-Control-Allow-Origin' 'https://www.a.com' always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
        add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization' always;
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }
    }
 
    # API2 跨域
    location /api2/ {
        proxy_pass http://backend2;
        add_header 'Access-Control-Allow-Origin' 'https://www.b.com' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
        add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization' always;
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }
    }
}

到此這篇關于nginx跨域訪問配置的幾種方法實現的文章就介紹到這了,更多相關nginx跨域訪問配置內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

nginx配置多域名共用服務器80端口
本文主要介紹了配置Nginx.conf文件,使得同一臺服務器上的服務程序能夠根據域名分發(fā)到相應的端口進行處理,從而實現用戶通過abc.com或xyz.com直接訪問到不同“網站”,感興趣的可以了解一下
2025-03-03
Nginx 如何部署指定文件夾下的項目(本地測試)
這篇文章主要介紹了Nginx 如何部署指定文件夾下的項目(本地測試),分為配置vue.config.js,指定生成環(huán)境的包,配置路由模式為hash（history模式刷新后,找不到頁面）,本文講解的非常詳細,需要的朋友可以參考下
2024-01-01
Nginx limit 限制訪問模塊的方法
本篇文章主要介紹了Nginx limit 限制訪問模塊的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
Nginx日志輸出配置json格式
本文主要介紹了Nginx日志輸出配置json格式,包含log_format和access_log兩種命令,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2024-07-07
在Nginx中如何為頁面配置用戶名密碼認證訪問
這篇文章主要介紹了在Nginx中如何為頁面配置用戶名密碼認證訪問的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-06-06
Nginx 連接tomcat時會話粘性問題分析及解決方法
這篇文章主要介紹了Nginx 連接tomcat時會話粘性問題分析及解決方法的相關資料，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2015-10-10
使Nginx服務器支持.htaccess的方法
這篇文章主要介紹了使Nginx服務器支持.htaccess的方法,.htaccess配置文件設置是Apache上的好東西,現在我們讓Nginx服務器也能使用它,需要的朋友可以參考下
2015-07-07
詳解nginx 配置多個tomcat共用80端口
本篇文章主要介紹了nginx 配置多個tomcat共用80端口，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
nginx中的兩個模塊的proxy_pass的區(qū)別解析
在nginx中配置proxy_pass代理轉發(fā)時，如果在proxy_pass后面的url加/，表示絕對根路徑；如果沒有/，表示相對路徑，把匹配的路徑部分也給代理走。本文給大家介紹nginx中的兩個模塊的proxy_pass的區(qū)別，感興趣的朋友一起看看吧
2021-11-11
nginx日志切割定時任務的實現
Nginx日志切割能有效管理日志,便于查詢、控制存儲空間、提高處理效率、方便備份與歸檔,減少數據丟失風險,實現方法包括重命名日志文件、編寫定時日志腳本和設置crontab定時任務
2024-11-11

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

nginx跨域訪問配置的幾種方法實現

目錄

一、基本跨域配置

二、只允許指定域名跨域

三、完整示例

四、配置后重載 nginx

五、注意事項

六、支持攜帶 Cookie 的跨域配置

七、根據請求頭動態(tài)設置允許的 Origin

八、常見問題排查

九、nginx 跨域配置模板（推薦）

十、針對不同路徑/接口做跨域控制

十一、靜態(tài)資源跨域（如圖片、字體、JS/CSS）

十二、根據請求方法細分 CORS 策略

十三、反向代理多后端的跨域配置

十四、nginx 1.7.5 及以上版本的 always 參數

十五、安全建議

十六、調試技巧

十七、完整多場景配置模板

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线 免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

nginx跨域訪問配置的幾種方法實現

目錄

一、基本跨域配置

二、只允許指定域名跨域

三、完整示例

四、配置后重載 nginx

五、注意事項

六、支持攜帶 Cookie 的跨域配置

七、根據請求頭動態(tài)設置允許的 Origin

八、常見問題排查

九、nginx 跨域配置模板（推薦）

十、針對不同路徑/接口做跨域控制

十一、靜態(tài)資源跨域（如圖片、字體、JS/CSS）

十二、根據請求方法細分 CORS 策略

十三、反向代理多后端的跨域配置

十四、nginx 1.7.5 及以上版本的 always 參數

十五、安全建議

十六、調試技巧

十七、完整多場景配置模板

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

一、基本跨域配置

二、只允許指定域名跨域

三、完整示例

六、支持攜帶 Cookie 的跨域配置

七、根據請求頭動態(tài)設置允許的 Origin

九、nginx 跨域配置模板（推薦）

十一、靜態(tài)資源跨域（如圖片、字體、JS/CSS）

十二、根據請求方法細分 CORS 策略

十三、反向代理多后端的跨域配置

十四、nginx 1.7.5 及以上版本的 always 參數

十五、安全建議

十六、調試技巧

十七、完整多場景配置模板