摘要:閱讀原文在日常的開(kāi)放中,我們經(jīng)常遇到跨域的問(wèn)題,常用的處理方式都是在代碼層添加支持,但若你有配置權(quán)限,在上處理跨域?qū)⑹沟贸绦虍惓:?jiǎn)單和高效。
用你最美的姿態(tài),去「跨域」那座山。閱讀原文
在日常的開(kāi)放中,我們經(jīng)常遇到跨域的問(wèn)題,常用的處理方式都是在代碼層添加 cors 支持,但若你有 Nginx 配置權(quán)限,在 Nginx 上處理跨域?qū)⑹沟贸绦虍惓:?jiǎn)單和高效。
代理假設(shè)我們的前端域名為 example.com,API 服務(wù)架設(shè)在 api.example.com 域名下,那我們可以通過(guò)代理的形式來(lái)配置跨越請(qǐng)求,具體的配置為:
在 Nginx 的 example.com 虛擬主機(jī)文件中配置如下的代理
配置成功重啟后,前端即可用 example.com/api 的方式和 API 交互
# /etc/nginx/sites-enabled/example.com.conf location /api/ { proxy_pass http://api.example.com/; }
這種方式的原理是將 API 提供的服務(wù),代理到前端域名的二級(jí)目錄下,從而避免跨域。
Response Header當(dāng)然由于很多情況下我們不想將服務(wù)代理到前端域名二級(jí)目下,那可以通過(guò)在 Http Response 中添加 Header 來(lái)解決跨越,具體配置如下:
# /etc/nginx/snippets/cors.conf; if ($request_method = "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" "DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,Content-Disposition" always; add_header "Access-Control-Max-Age" 1728000 always; add_header "Content-Length" 0; add_header "Content-Type" "text/plain; charset=utf-8"; return 204; } if ($request_method ~* "(GET|POST|DELETE|PUT)") { add_header "Access-Control-Allow-Origin" "*" always; }
關(guān)于何時(shí)會(huì)發(fā)起 OPTIONS 請(qǐng)求及 OPTIONS 請(qǐng)求的內(nèi)容,可參考阮老師的這篇文章—— 跨域資源共享 CORS 詳解
然后在 API 服務(wù)域名下添加 CORS 支持即可
# /etc/nginx/sites-enabled/api.example.com.conf location / { try_files $uri $uri/ /index.php?$query_string; } location ~ .php$ { // 引入 cors 配置 include snippets/cors.conf; fastcgi_split_path_info ^(.+.php)(/.+)$; fastcgi_pass unix:/var/run/php/php7.2-fpm.sock; ... ... }
注意 include snippets/cors.conf 這段代碼的位置,若直接放在 location 中,是不起作用的,如下所示:
location / { include snippets/cors.conf; try_files $uri $uri/ /index.php?$query_string; }
這是因?yàn)橄旅娴?try_files 將請(qǐng)求 Forward 到了 location ~ .php$ 這個(gè) block 下,在此之前添加的 add_header 命令是無(wú)效的。
enjoy ~_~
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/40457.html
摘要:同源策略所謂同源是指協(xié)議,域名,端口均相同。同源策略是瀏覽器的一個(gè)安全功能,不同源的客戶(hù)端腳本在沒(méi)有明確授權(quán)的情況下,不能讀寫(xiě)對(duì)方資源。需注意的是由于同源策略的限制,所讀取的為跨域請(qǐng)求接口所在域的,而非當(dāng)前頁(yè)。 一、什么是跨域 1.URL解析 URL (Uniform Resource Locator )統(tǒng)一資源定位符(URL)是用于完整地描述Internet上網(wǎng)頁(yè)和其他資源的地址的...
摘要:老徐是一個(gè)開(kāi)源的企業(yè)級(jí)全?;萜鞑渴鸺肮芾砥脚_(tái)。為容器提供一攬子基礎(chǔ)架構(gòu)服務(wù)兼容的網(wǎng)絡(luò)服務(wù)存儲(chǔ)服務(wù)主機(jī)管理負(fù)載均衡防護(hù)墻讓上述服務(wù)跨越公有云私有云虛擬機(jī)物理機(jī)環(huán)境運(yùn)行,真正實(shí)現(xiàn)一鍵式應(yīng)用部署和管理。已有超過(guò)萬(wàn)次下載,生產(chǎn)環(huán)境的應(yīng)用。 showImg(https://segmentfault.com/img/remote/1460000013588742?w=40&h=40);老徐Su...
摘要:二解決思路知道是客戶(hù)端瀏覽器為了安全使用同源策略導(dǎo)致的,而服務(wù)端是沒(méi)有這個(gè)限制的,那我們就只能通過(guò)服務(wù)端進(jìn)行跨域了。哈哈,這也是為啥后端和生產(chǎn)環(huán)境下比較少聽(tīng)說(shuō)跨域的問(wèn)題,所以這里介紹開(kāi)發(fā)環(huán)境中的幾種方法。 一、為什么會(huì)有跨越問(wèn)題是客戶(hù)端瀏覽器同源策略導(dǎo)致的,就是瀏覽器不允許不同源的站點(diǎn)相互訪(fǎng)問(wèn)。試想一下要是沒(méi)有這個(gè),那站點(diǎn)里的安全信息如cookie,賬號(hào)/密碼等是不是很容易被其它站點(diǎn)獲...
摘要:需注意的是由于同源策略的限制,所讀取的為跨域請(qǐng)求接口所在域的,而非當(dāng)前頁(yè)。目前,所有瀏覽器都支持該功能需要使用對(duì)象來(lái)支持,也已經(jīng)成為主流的跨域解決方案。反向代理接口跨域跨域原理同源策略是瀏覽器的安全策略,不是協(xié)議的一部分。 什么是跨域? 跨域是指一個(gè)域下的文檔或腳本試圖去請(qǐng)求另一個(gè)域下的資源,這里跨域是廣義的。 廣義的跨域: 1.) 資源跳轉(zhuǎn): A鏈接、重定向、表單提交 2.) 資源...
摘要:早在年針對(duì)高科技行業(yè)和高科技企業(yè)生命周期的特點(diǎn),提出了著名的鴻溝理論。今天我們嘗試以鴻溝理論為基礎(chǔ)來(lái)分析云原生領(lǐng)域顛覆性的創(chuàng)新技術(shù)?;剡^(guò)頭來(lái)看,靈雀云從早期全力投入技術(shù)棧,是最早進(jìn)行產(chǎn)品化的廠商。 歷史進(jìn)入2019年,放眼望去,今天的整個(gè)技術(shù)大環(huán)境和生態(tài)都發(fā)生了很大的變化。在己亥豬年春節(jié)剛剛過(guò)去的早春時(shí)節(jié),我們來(lái)梳理和展望一下整個(gè)云原生技術(shù)趨勢(shì)的發(fā)展,是一件很有意義的事情,這其中有些變...
閱讀 950·2021-11-15 11:38
閱讀 1679·2021-09-24 09:48
閱讀 919·2021-09-24 09:47
閱讀 2339·2021-08-26 14:15
閱讀 3567·2019-08-30 11:09
閱讀 2692·2019-08-29 16:55
閱讀 1657·2019-08-26 14:01
閱讀 3119·2019-08-23 16:47