nginx 反向代理處理跨域問題

printempw 發布于2019-08-23 17:53 / 2433人閱讀

摘要：原文鏈接反向代理是什么放兩個神圖，圖片來自這里。反向代理是代理你的目標服務器，請求目標服務器的代理，做一些處理后再真正請求。在這篇文章里，反向代理用于處理跨域問題。

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

反向代理是什么

放兩個神圖，圖片來自這里。

這是正向代理

這是反向代理

正向代理是你發出請求的時候先經過代理服務器，所以實際上發出請求的是代理服務器。

反向代理是“代理你的目標服務器”，請求目標服務器的代理，做一些處理后再真正請求。

在這篇文章里，反向代理用于處理跨域問題。

測試環境的跨域

module.exports = {
  publicPath: "/",
  devServer: {
    proxy: {
      "/wiki": {
        target: "http://xxx.com.cn", // 代理到的目標地址
        pathRewrite: { "^/wiki": "" }, // 重寫部分路徑
        ws: true, // 是否代理 websockets
        changeOrigin: true,
      },
    },
  },
}

我們神奇的 webpack 有一個可以幫你實現測試跨域的插件，相信大家都比較熟悉，本質上這個插件的功能來自 http-proxy-middleware。

* 關于 changeOrigin：這個選項的作用真的看不懂（下面是源碼），看代碼貌似是改變 headers 的 host 字段，但是實際上我修改成 true 和 false 測試，請求頭好像并沒有變化。但是以前的一個項目中有一個情況是必須把這個選項設定為 true 才能正常跨域，所以保險起見設 true。這個問題先放下吧，或者大家知道的話在評論區留言指導一下 OTL。

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

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

在 nginx 配置

聯動一下之前的普通地址配置。

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

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

rewrite 的語法是（來自文檔）：rewrite regex replacement [flag];

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

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

附加的正則小知識

其實 $1 在 JavaScript 的正則里也能使用：

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

在這里，括號的作用就是用于匹配一個分塊。作為對比再舉一個例子：

let reg = /^/wiki/(.*)$/
let reg2 = /^/wiki/.*$/
// 其實不用括號也完全可以匹配你需要的字符串
// 但是在 match 的時候你就能看到區別
"/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 輸出的數組的第二個參數就是所謂的 $1，如果后面還有其他括號分組就會有 $2、$3，但是不加括號就不存在這個東西。

再會

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/104293.html

通過nginx反向代理解決前端訪問的跨域問題

摘要：三反向代理解決的原理將安裝在本地，然后將項目部署于下，這樣訪問本地項目時用本地項目即可訪問。這樣瀏覽器之間的請求完全滿足瀏覽器域名協議端口相同的同源策略，可在不改變后臺接口的情況下避免跨域問題。一、問題背景說明：編寫移動前端頁面時需要訪問后臺系統接口。前端項目在本地（個人辦公電腦）開發，后臺接口存放后生產的后臺服務器，本地的ajax請求無法直接訪問后臺接口，也就是遇到了跨域問題...

dongxiawu 2019-08-23 11:39 評論0 收藏0
通過nginx反向代理解決前端訪問的跨域問題

摘要：三反向代理解決的原理將安裝在本地，然后將項目部署于下，這樣訪問本地項目時用本地項目即可訪問。這樣瀏覽器之間的請求完全滿足瀏覽器域名協議端口相同的同源策略，可在不改變后臺接口的情況下避免跨域問題。一、問題背景說明：編寫移動前端頁面時需要訪問后臺系統接口。前端項目在本地（個人辦公電腦）開發，后臺接口存放后生產的后臺服務器，本地的ajax請求無法直接訪問后臺接口，也就是遇到了跨域問題...

paulquei 2019-07-25 14:26 評論0 收藏0
Nginx

摘要：此外，其也能夠提供強大的反向代理功能。是由為俄羅斯訪問量第二的站點開發的，第一個公開版本發布于年月日。 keepalived+nginx 實現高可用雙機熱備 + 負載均衡架構 1 準備4個ubuntu16.04虛擬機（啟用網卡二并使用橋接模式）:A服務器：192.168.0.103 主B服務器：192.168.0.104 主（備）前端工程師學習 Nginx ...

syoya 2019-07-25 14:06 評論0 收藏0
利用Nginx反向代理解決跨域問題

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

EscapedDog 2019-08-23 14:13 評論0 收藏0
利用Nginx反向代理解決跨域問題

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

YanceyOfficial 2019-07-25 14:36 評論0 收藏0