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