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

資訊專欄INFORMATION COLUMN

nginx 反向代理處理跨域問(wèn)題

printempw / 2430人閱讀

摘要：原文鏈接反向代理是什么放兩個(gè)神圖，圖片來(lái)自這里。反向代理是代理你的目標(biāo)服務(wù)器，請(qǐng)求目標(biāo)服務(wù)器的代理，做一些處理后再真正請(qǐng)求。在這篇文章里，反向代理用于處理跨域問(wèn)題。

原文鏈接：https://ssshooter.com/2019-05...

反向代理是什么

放兩個(gè)神圖，圖片來(lái)自這里。

這是正向代理

這是反向代理

正向代理是你發(fā)出請(qǐng)求的時(shí)候先經(jīng)過(guò)代理服務(wù)器，所以實(shí)際上發(fā)出請(qǐng)求的是代理服務(wù)器。

反向代理是“代理你的目標(biāo)服務(wù)器”，請(qǐng)求目標(biāo)服務(wù)器的代理，做一些處理后再真正請(qǐng)求。

在這篇文章里，反向代理用于處理跨域問(wèn)題。

測(cè)試環(huán)境的跨域 
module.exports = {
  publicPath: "/",
  devServer: {
    proxy: {
      "/wiki": {
        target: "http://xxx.com.cn", // 代理到的目標(biāo)地址
        pathRewrite: { "^/wiki": "" }, // 重寫部分路徑
        ws: true, // 是否代理 websockets
        changeOrigin: true,
      },
    },
  },
}

我們神奇的 webpack 有一個(gè)可以幫你實(shí)現(xiàn)測(cè)試跨域的插件，相信大家都比較熟悉，本質(zhì)上這個(gè)插件的功能來(lái)自 http-proxy-middleware。

* 關(guān)于 changeOrigin：這個(gè)選項(xiàng)的作用真的看不懂（下面是源碼），看代碼貌似是改變 headers 的 host 字段，但是實(shí)際上我修改成 true 和 false 測(cè)試，請(qǐng)求頭好像并沒(méi)有變化。但是以前的一個(gè)項(xiàng)目中有一個(gè)情況是必須把這個(gè)選項(xiàng)設(shè)定為 true 才能正?？缬?，所以保險(xiǎn)起見(jiàn)設(shè) true。這個(gè)問(wèn)題先放下吧，或者大家知道的話在評(píng)論區(qū)留言指導(dǎo)一下 OTL。

// 附源碼
if (options.changeOrigin) {
  outgoing.headers.host =
    required(outgoing.port, options[forward || "target"].protocol) &&
    !hasPort(outgoing.host)
      ? outgoing.host + ":" + outgoing.port
      : outgoing.host
}

按照上面的配置啟動(dòng)測(cè)試環(huán)境之后，直接在瀏覽器輸入 http://localhost/wiki/rest/api/2/user/picker 就等于訪問(wèn) http://xxx.com.cn/rest/api/2/user/picker。

在 nginx 配置

聯(lián)動(dòng)一下之前的普通地址配置。

在這次要做的配置甚至沒(méi)有上次相對(duì)位置的理解難，寫法都跟 node 的配置差不多，只需要兩句：

location /wiki/ {
    rewrite ^/wiki/(.*)$ /$1 break;
    proxy_pass http://xxx.com.cn;
}

rewrite 的語(yǔ)法是（來(lái)自文檔）：rewrite regex replacement [flag];

所以上面的效果是匹配 ^/wiki/(.*)$ 然后替換為 / 加匹配到的后面括號(hào)后的分塊。

按照上面的配置，重啟 nginx ./nginx -s reload，直接在瀏覽器輸入 http://localhost/wiki/rest/api/2/user/picker 就等于訪問(wèn) http://xxx.com.cn/rest/api/2/user/picker 啦。

附加的正則小知識(shí)

其實(shí) $1 在 JavaScript 的正則里也能使用：

let reg = /^/wiki/(.*)$/
"/wiki/2111edqd".replace(reg, "$1")
// => 2111edqd

在這里，括號(hào)的作用就是用于匹配一個(gè)分塊。作為對(duì)比再舉一個(gè)例子：

let reg = /^/wiki/(.*)$/
let reg2 = /^/wiki/.*$/
// 其實(shí)不用括號(hào)也完全可以匹配你需要的字符串
// 但是在 match 的時(shí)候你就能看到區(qū)別
"/wiki/2111edqd".match(reg)
// 輸出 ["/wiki/2111edqd", "2111edqd", index: 0, input: "/wiki/2111edqd", groups: undefined]
"/wiki/2111edqd".match(reg2)
// 輸出 ["/wiki/2111edqd", index: 0, input: "/wiki/2111edqd", groups: undefined]

reg 輸出的數(shù)組的第二個(gè)參數(shù)就是所謂的 $1，如果后面還有其他括號(hào)分組就會(huì)有 $2、$3，但是不加括號(hào)就不存在這個(gè)東西。

再會(huì)

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

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

相關(guān)文章

  • 通過(guò)nginx反向代理解決前端訪問(wèn)的跨域問(wèn)題

    摘要：三反向代理解決的原理將安裝在本地，然后將項(xiàng)目部署于下，這樣訪問(wèn)本地項(xiàng)目時(shí)用本地項(xiàng)目即可訪問(wèn)。這樣瀏覽器之間的請(qǐng)求完全滿足瀏覽器域名協(xié)議端口相同的同源策略，可在不改變后臺(tái)接口的情況下避免跨域問(wèn)題。 一、問(wèn)題背景說(shuō)明： 編寫移動(dòng)前端頁(yè)面時(shí)需要訪問(wèn)后臺(tái)系統(tǒng)接口。前端項(xiàng)目在本地（個(gè)人辦公電腦）開(kāi)發(fā)，后臺(tái)接口存放后生產(chǎn)的后臺(tái)服務(wù)器，本地的ajax請(qǐng)求無(wú)法直接訪問(wèn)后臺(tái)接口，也就是遇到了跨域問(wèn)題...

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

  • 通過(guò)nginx反向代理解決前端訪問(wèn)的跨域問(wèn)題

    摘要：三反向代理解決的原理將安裝在本地，然后將項(xiàng)目部署于下，這樣訪問(wèn)本地項(xiàng)目時(shí)用本地項(xiàng)目即可訪問(wèn)。這樣瀏覽器之間的請(qǐng)求完全滿足瀏覽器域名協(xié)議端口相同的同源策略，可在不改變后臺(tái)接口的情況下避免跨域問(wèn)題。 一、問(wèn)題背景說(shuō)明： 編寫移動(dòng)前端頁(yè)面時(shí)需要訪問(wèn)后臺(tái)系統(tǒng)接口。前端項(xiàng)目在本地（個(gè)人辦公電腦）開(kāi)發(fā)，后臺(tái)接口存放后生產(chǎn)的后臺(tái)服務(wù)器，本地的ajax請(qǐng)求無(wú)法直接訪問(wèn)后臺(tái)接口，也就是遇到了跨域問(wèn)題...

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

  • Nginx

    摘要：此外，其也能夠提供強(qiáng)大的反向代理功能。是由為俄羅斯訪問(wèn)量第二的站點(diǎn)開(kāi)發(fā)的，第一個(gè)公開(kāi)版本發(fā)布于年月日。 keepalived+nginx 實(shí)現(xiàn)高可用雙機(jī)熱備 + 負(fù)載均衡架構(gòu) 1 準(zhǔn)備4個(gè)ubuntu16.04虛擬機(jī)（啟用網(wǎng)卡二并使用橋接模式）:A服務(wù)器：192.168.0.103 主B服務(wù)器：192.168.0.104 主（備） 前端工程師學(xué)習(xí) Nginx ...

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

  • 利用Nginx反向代理解決跨域問(wèn)題

    摘要：反向代理服務(wù)器對(duì)于客戶端而言它就像是原始服務(wù)器，并且客戶端不需要進(jìn)行任何特別的設(shè)置。使用反向代理可能訪問(wèn)網(wǎng)頁(yè)相對(duì)于之前響應(yīng)會(huì)比較慢 標(biāo)簽： Nginx,跨域 問(wèn)題 在之前的分享的跨域資源共享的文章中，有提到要注意跨域時(shí)，如果要發(fā)送Cookie，Access-Control-Allow-Origin就不能設(shè)為*，必須指定明確的、與請(qǐng)求網(wǎng)頁(yè)一致的域名。在此次項(xiàng)目開(kāi)發(fā)中與他人協(xié)作中就遇到...

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

  • 利用Nginx反向代理解決跨域問(wèn)題

    摘要：反向代理服務(wù)器對(duì)于客戶端而言它就像是原始服務(wù)器，并且客戶端不需要進(jìn)行任何特別的設(shè)置。使用反向代理可能訪問(wèn)網(wǎng)頁(yè)相對(duì)于之前響應(yīng)會(huì)比較慢 標(biāo)簽： Nginx,跨域 問(wèn)題 在之前的分享的跨域資源共享的文章中，有提到要注意跨域時(shí)，如果要發(fā)送Cookie，Access-Control-Allow-Origin就不能設(shè)為*，必須指定明確的、與請(qǐng)求網(wǎng)頁(yè)一致的域名。在此次項(xiàng)目開(kāi)發(fā)中與他人協(xié)作中就遇到...

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

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

0條評(píng)論

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