Nginx跨域訪問配置方式(Web反向代理跨域訪問配置)
更新時間：2024年06月19日 09:32:05 作者：嘆人間，美中不足今方信
這篇文章主要介紹了Nginx跨域訪問配置方式(Web反向代理跨域訪問配置),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Nginx跨域訪問配置(Web反向代理跨域訪問配置)
出于安全的原因，瀏覽器限制從腳本內(nèi)發(fā)起跨域的HTTP請求，除非響應(yīng)報文中包含了允許瀏覽器解析報文的CORS響應(yīng)頭
也就是說，響應(yīng)報文的頭中要有以下幾個響應(yīng)頭
Nginx要使用add_header添加這幾個響應(yīng)頭
1.前后端分離的工程
一般情況下是使用Ajax訪問后端接口
Ajax的請求頭為X-Requested-With
因此服務(wù)端要允許X-Requested-With的請求頭
add_header 'Access-Control-Allow-Headers' 'X-Requested-With';
2.服務(wù)端要配置哪些域
是可以跨域訪問到本服務(wù)器資源的
add_header 'Access-Control-Allow-Origin' '*';
注意：
- 如果使用了
add_header 'Access-Control-Allow-Credentials' 'true'
- 那么不能使用通配符
add_header 'Access-Control-Allow-Origin' 'www.baidu.com'; add_header 'Access-Control-Allow-Credentials' 'true';
3.服務(wù)器端要指定HTTP請求的方法
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS'
案例
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Headers' 'X-Requested-With';
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS'
# 由于跨域請求，瀏覽器會先發(fā)送一個OPTIONS的預(yù)檢請求，我們可以緩存第一次的預(yù)檢請求的失效時間
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Max-Age' 2592000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}HTTP請求頭詳解點(diǎn)這里查看。
對于跨域的配置，不是只有Nginx可以配置，在Spring中也提供了跨域訪問的配置
詳見CorsFilter、CorsConfiguration、UrlBasedCorsConfigurationSource
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Nginx服務(wù)器設(shè)置網(wǎng)站驗證訪問的方法
這篇文章主要介紹了Nginx服務(wù)器設(shè)置網(wǎng)站驗證訪問的方法,通過設(shè)置密碼來要求登錄網(wǎng)站目錄的用戶進(jìn)行驗證,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了解決nginx重新加載配置文件,配置文件沒生效問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
ubuntu16.04下徹底卸載nginx的相關(guān)命令
nginx是一款自由的、開源的、高性能的HTTP服務(wù)器和反向代理服務(wù)器；這篇文章主要介紹了ubuntu16.04下徹底卸載nginx的相關(guān)命令,需要的朋友可以參考下2018-12-12
在有一次配置時發(fā)現(xiàn)，請求?uri?明明是符合了前綴匹配?^~?規(guī)則，但?nginx?卻沒有使用，這讓我對上述結(jié)論產(chǎn)生了疑惑。后續(xù)通過調(diào)研、實(shí)踐后發(fā)現(xiàn)，上述結(jié)論可以說對，但也不對，是不是更疑惑了？沒關(guān)系，看完這篇文章你就知道我為什么會這樣說了2022-05-05
Nginx搭建前端本地預(yù)覽環(huán)境的完整步驟教學(xué)
這篇文章主要為大家詳細(xì)介紹了Nginx搭建前端本地預(yù)覽環(huán)境的完整步驟教學(xué),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-09-09
本文主要介紹了nginx各種代理配置大全,主要包括了路徑配置,http跳轉(zhuǎn)https,微信支付的校驗等,具有一定的參考價值,感興趣的可以了解一下2023-09-09
nginx 是一個高性能的 Web 服務(wù)器，之前也寫過一些關(guān)于 nginx 的文章。為了提高博客的響應(yīng)速度，可以從設(shè)置 nginx 的 gzip 和緩存這2方面入手。為字體開啟 gzip 和緩存能大大減少帶寬的消耗2017-03-03
Nginx?502?Bad?Gateway錯誤解決詳細(xì)指南與實(shí)例
這篇文章主要介紹了Nginx?502?Bad?Gateway錯誤解決的相關(guān)資料,502BadGateway錯誤是Web開發(fā)和運(yùn)維中常見的錯誤,表示一個服務(wù)器在充當(dāng)網(wǎng)關(guān)或代理時,從上游服務(wù)器收到了一個無效的響應(yīng),需要的朋友可以參考下2024-11-11
這篇文章主要介紹了詳解如何修改nginx的默認(rèn)端口，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
nginx中配置https的詳細(xì)步驟及配置SSL/TLS證書的完整流程
本文將詳細(xì)介紹如何在 Nginx 服務(wù)器上配置 SSL/TLS 證書,包括獲取證書、配置 Nginx、強(qiáng)化安全性等完整流程,無論您是使用 Let’s Encrypt 的免費(fèi)證書還是自簽名證書,都能在本指南中找到對應(yīng)的配置方法,感興趣的朋友跟隨小編一起看看吧2025-10-10