跨域是指a頁面想獲取b頁面資源,如果a、b頁面的協(xié)議、域名、端口、子域名不同,所進行的訪問行動都是跨域的,而瀏覽器為了安全問題一般都限制了跨域訪問,也就是不允許跨域請求資源。注意:跨域限制訪問,其實是瀏覽器的限制。理解這一點很重要?。?!
最近公司前后端分離,前端獨立提供頁面和靜態(tài)服務很自然的就想到了用nginx去做靜態(tài)服務器。同時由于跨域了,就想利用nginx的反向代理去處理一下跨域,但是在解決問題的同時,發(fā)現(xiàn)網上有些方案的確是存在一些問題,在這里總結一下基本配置,也聊一下常見的配置問題。
Nginx接口服務反向代理基本配置
server {
listen 8443; # 監(jiān)聽的端口號
server_name a.test.com; # 服務器名稱
client_max_body_size 100m; # 定義讀取客戶端請求頭的超時時間
ssl on;
ssl_certificate test.pem;
ssl_certificate_key test.key;
ssl_session_timeout 5m;
ssl_protocols SSLv3 TLSv1.2;
ssl_ciphers ECDHE-RSA-AES256-SHA384:AES256-SHA256:RC4:HIGH:!MD5:!aNULL:!eNULL:!NULL:!DH:!EDH:!AESGCM;
ssl_prefer_server_ciphers on;
location / {
root /test-static-app; # 靜態(tài)資源目錄
index index.html index.htm;
try_files $uri $uri/ /index.html; # 動態(tài)解析目錄,配合vue的history模式
}
}
基本配置實現(xiàn)了頁面及靜態(tài)服務器的基本功能,并可以實現(xiàn)使用vue的history模式時的路由解析。進一步的,為了實現(xiàn)向接口服務器的統(tǒng)一轉發(fā),我們需要和后端開發(fā)人員規(guī)定接口名的前綴,比如所有接口的相對路徑都以api開頭,此時我們可以添加如下配置(和上一個location平級),
...
location /api {
proxy_pass https://b.test.com; # 設置代理服務器的協(xié)議和地址
proxy_cookie_domain b.test.com a.test.com; # 修改cookie,針對request和response互相寫入cookie
}
...
其中主要依賴proxy_pass,實現(xiàn)將a.test.com下的/api/x接口轉發(fā)到了b.test.com下面,這個過程大致如下
cookie的交互主要就是proxy_cookie_domain,加上下面這段
proxy_cookie_domain b.test.com a.test.com;
這個實現(xiàn)了,a.test.com和b.test.com域名之間cookie的傳遞與回寫。
如果用node來模擬一下的話,大致如下
module.exports = (router) => {
router.get('/api/index/getCmsInfo', async function (ctx, next) {
// 接口轉發(fā)
let result = await superagent.post('https://b.test.com/api/card/home').set(browserMsg)
// 獲取返回的set-cookie,并設置header
let setCookie = result.headers['set-cookie']
if (setCookie) {
ctx.response.header['set-cookie'] = setCookie
}
// 返回
ctx.response.body={
success: true,
result: result.body
}
})
}
綜上nginx反向代理的本質其實就是接口服務的轉發(fā)與header的處理,仔細想想也就容易理解了。
常見誤區(qū)
1、無用的ACA-Header ?
網上很多的nginx跨域設置里面都加了跨域header設置相關的內容,比如
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' "true";
add_header Access-Control-Allow-Headers X-Requested-With;
想想上面的原理,各位看官覺得這個還有用么?ACA(Access-Control-Allow-)系列的header本身是為了cors中做協(xié)商跨域而配置的,在這里配這個純屬脫褲子放屁多此一舉。
2、proxy_pass 域名帶不帶‘斜杠/' ?
同樣的,在網上看到了有的網友在配置proxy_pass的時候,會在后面加一個斜杠,如下,然后說報錯啦,找不到接口啦~咋整啊~
...
location /api {
#proxy_pass https://b.test.com;
proxy_pass https://b.test.com/;
}
...
看到這個我們來想一想哈,proxy_pass的作用是抓發(fā),加了斜杠意味著所有的/api請求都會轉發(fā)到根目錄下,也就是說 /api 會被 / 替代,這個時候接口路徑就變了,少了一層/api。而不加斜杠的時候呢?這代表著轉發(fā)到b.test.com 的域名下,/api的路徑不會丟失。
針對這種情況,如果后端接口統(tǒng)一有了規(guī)定前綴,比如/api,那你這里就不要配置斜杠了。另一種情況,后端接口shit一樣,沒有統(tǒng)一前綴,這邊又要區(qū)分,那就在前端所有接口都加一個統(tǒng)一前綴,比如/api,然后通過加斜杠來替換掉好了~
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。