成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Nginx反向代理跨域基本配置與常見誤區(qū)

lindroid / 1592人閱讀

摘要：同時(shí)由于跨域了，就想利用的反向代理去處理一下跨域，但是在解決問題的同時(shí)，發(fā)現(xiàn)網(wǎng)上有些方案的確是存在一些問題，在這里總結(jié)一下基本配置，也聊一下常見的配置問題。

最近公司前后端分離，前端獨(dú)立提供頁(yè)面和靜態(tài)服務(wù)很自然的就想到了用nginx去做靜態(tài)服務(wù)器。同時(shí)由于跨域了，就想利用nginx的反向代理去處理一下跨域，但是在解決問題的同時(shí)，發(fā)現(xiàn)網(wǎng)上有些方案的確是存在一些問題，在這里總結(jié)一下基本配置，也聊一下常見的配置問題。

Nginx接口服務(wù)反向代理基本配置 
server {
    listen 8443; # 監(jiān)聽的端口號(hào)
    server_name a.test.com; # 服務(wù)器名稱
    client_max_body_size 100m;   # 定義讀取客戶端請(qǐng)求頭的超時(shí)時(shí)間
    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; # 動(dòng)態(tài)解析目錄，配合vue的history模式
    }
}

基本配置實(shí)現(xiàn)了頁(yè)面及靜態(tài)服務(wù)器的基本功能，并可以實(shí)現(xiàn)使用vue的history模式時(shí)的路由解析。進(jìn)一步的，為了實(shí)現(xiàn)向接口服務(wù)器的統(tǒng)一轉(zhuǎn)發(fā)，我們需要和后端開發(fā)人員規(guī)定接口名的前綴，比如所有接口的相對(duì)路徑都以api開頭，此時(shí)我們可以添加如下配置(和上一個(gè)location平級(jí))，

...
location /api {
   proxy_pass https://b.test.com; # 設(shè)置代理服務(wù)器的協(xié)議和地址
   proxy_cookie_domain b.test.com  a.test.com; # 修改cookie，針對(duì)request和response互相寫入cookie
}       
...

其中主要依賴proxy_pass，實(shí)現(xiàn)將a.test.com下的/api/x接口轉(zhuǎn)發(fā)到了b.test.com下面，這個(gè)過程大致如下

cookie的交互主要就是proxy_cookie_domain，加上下面這段

proxy_cookie_domain b.test.com  a.test.com;

這個(gè)實(shí)現(xiàn)了，a.test.com和b.test.com域名之間cookie的傳遞與回寫。這里的理解有點(diǎn)誤區(qū)，請(qǐng)移步到詳細(xì)解釋Nginx反向代理理解誤區(qū)之proxy_cookie_domain

如果用node來(lái)模擬一下的話，大致如下

module.exports =  (router) => {
  router.get("/api/index/getCmsInfo", async function (ctx, next) {
    // 接口轉(zhuǎn)發(fā)
    let result = await superagent.post("https://b.test.com/api/card/home").set(browserMsg)
    // 獲取返回的set-cookie，并設(shè)置header
    let setCookie = result.headers["set-cookie"]
    if (setCookie) {
        ctx.response.header["set-cookie"] = setCookie
    }
    // 返回
    ctx.response.body={
        success: true,
        result: result.body 
    }
  })
}

綜上nginx反向代理的本質(zhì)其實(shí)就是接口服務(wù)的轉(zhuǎn)發(fā)與header的處理，仔細(xì)想想也就容易理解了。

常見誤區(qū)

1、無(wú)用的ACA-Header ？
網(wǎng)上很多的nginx跨域設(shè)置里面都加了跨域header設(shè)置相關(guān)的內(nèi)容，比如

add_header "Access-Control-Allow-Origin" "*";
add_header "Access-Control-Allow-Credentials" "true"; 
add_header Access-Control-Allow-Headers X-Requested-With;

想想上面的原理，各位看官覺得這個(gè)還有用么？ACA(Access-Control-Allow-)系列的header本身是為了cors中做協(xié)商跨域而配置的，在這里配這個(gè)純屬脫褲子放屁多此一舉。
2、proxy_pass 域名帶不帶‘斜杠/’ ？
同樣的，在網(wǎng)上看到了有的網(wǎng)友在配置proxy_pass的時(shí)候，會(huì)在后面加一個(gè)斜杠，如下，然后說(shuō)報(bào)錯(cuò)啦，找不到接口啦～咋整啊～

...
location /api {
   #proxy_pass https://b.test.com;
   proxy_pass https://b.test.com/;
}       
...

看到這個(gè)我們來(lái)想一想哈，proxy_pass的作用是抓發(fā)，加了斜杠意味著所有的/api請(qǐng)求都會(huì)轉(zhuǎn)發(fā)到根目錄下，也就是說(shuō) /api 會(huì)被 / 替代，這個(gè)時(shí)候接口路徑就變了，少了一層/api。而不加斜杠的時(shí)候呢？這代表著轉(zhuǎn)發(fā)到b.test.com 的域名下，/api的路徑不會(huì)丟失。
針對(duì)這種情況，如果后端接口統(tǒng)一有了規(guī)定前綴，比如/api，那你這里就不要配置斜杠了。另一種情況，后端接口shit一樣，沒有統(tǒng)一前綴，這邊又要區(qū)分，那就在前端所有接口都加一個(gè)統(tǒng)一前綴，比如/api，然后通過加斜杠來(lái)替換掉好了～

以上就是本次的全部?jī)?nèi)容了～今天的《新聞聯(lián)播》播送完了，謝謝收看，再見～再見～

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97154.html

相關(guān)文章

  • Nginx反向代理跨域基本配置與常見誤區(qū)

    摘要：同時(shí)由于跨域了，就想利用的反向代理去處理一下跨域，但是在解決問題的同時(shí)，發(fā)現(xiàn)網(wǎng)上有些方案的確是存在一些問題，在這里總結(jié)一下基本配置，也聊一下常見的配置問題。 最近公司前后端分離，前端獨(dú)立提供頁(yè)面和靜態(tài)服務(wù)很自然的就想到了用nginx去做靜態(tài)服務(wù)器。同時(shí)由于跨域了，就想利用nginx的反向代理去處理一下跨域，但是在解決問題的同時(shí)，發(fā)現(xiàn)網(wǎng)上有些方案的確是存在一些問題，在這里總結(jié)一下基本配置...

    JasonZhang 評(píng)論0 收藏0

  • CORS跨域與Nginx反向代理跨域優(yōu)劣對(duì)比

    摘要：最近寫了一些關(guān)于前后端分離項(xiàng)目之后，跨域相關(guān)方案的基本原理和常見誤區(qū)的帖子，主要包括和反向代理。反向代理此時(shí)后端相當(dāng)于不跨域，和正常請(qǐng)求一致，無(wú)需額外配置。 最近寫了一些關(guān)于前后端分離項(xiàng)目之后，跨域相關(guān)方案的基本原理和常見誤區(qū)的帖子，主要包括CORS和Nginx反向代理。這兩種方案項(xiàng)目中都有在用，各有優(yōu)缺，關(guān)于具體使用哪種方案，大家的觀點(diǎn)也不大一致，本文主要就此展開一下，從前后端及服務(wù)...

    yiliang 評(píng)論0 收藏0

  • 前端常見跨域解決方案（全）

    摘要：需注意的是由于同源策略的限制，所讀取的為跨域請(qǐng)求接口所在域的，而非當(dāng)前頁(yè)。目前，所有瀏覽器都支持該功能需要使用對(duì)象來(lái)支持，也已經(jīng)成為主流的跨域解決方案。反向代理接口跨域跨域原理同源策略是瀏覽器的安全策略，不是協(xié)議的一部分。 什么是跨域？ 跨域是指一個(gè)域下的文檔或腳本試圖去請(qǐng)求另一個(gè)域下的資源，這里跨域是廣義的。 廣義的跨域： 1.) 資源跳轉(zhuǎn)： A鏈接、重定向、表單提交 2.) 資源...

    canger 評(píng)論0 收藏0

  • Nginx反向代理理解誤區(qū)之proxy_cookie_domain

    摘要：但是對(duì)于一些設(shè)置了的項(xiàng)目，比如這種情況下當(dāng)你用做反向代理的時(shí)候，就必須要轉(zhuǎn)換一下了。多學(xué)習(xí)，多去關(guān)注一些底層的原理，才會(huì)發(fā)現(xiàn)自己理解的錯(cuò)誤，望諸君共勉如果錯(cuò)誤，歡迎指出 基本內(nèi)容 Nginx做反向代理的時(shí)候，我們一般習(xí)慣添加proxy_cookie_domain配置，來(lái)做cookie的域名轉(zhuǎn)換，比如 ... location /api { proxy_pass https://b...

    岳光 評(píng)論0 收藏0

  • 九種跨域方式實(shí)現(xiàn)原理（完整版）

    摘要：二跨域解決方案原理利用標(biāo)簽沒有跨域限制的漏洞，網(wǎng)頁(yè)可以得到從其他來(lái)源動(dòng)態(tài)產(chǎn)生的數(shù)據(jù)。使用反向代理實(shí)現(xiàn)跨域，是最簡(jiǎn)單的跨域方式。 前言 前后端數(shù)據(jù)交互經(jīng)常會(huì)碰到請(qǐng)求跨域，什么是跨域，以及有哪幾種跨域方式，這是本文要探討的內(nèi)容。 本文完整的源代碼請(qǐng)猛戳github博客，紙上得來(lái)終覺淺，建議動(dòng)手敲敲代碼 一、什么是跨域？ 1.什么是同源策略及其限制內(nèi)容？ 同源策略是一種約定，它是瀏覽器最核心...

    edgardeng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<