2. 程式人生 > >如何理解 package.json 中的 proxy 欄位？

如何理解 package.json 中的 proxy 欄位？

阿新 • • 發佈：2018-12-02

入職新公司以來，第一個月接手vue專案，第二個月接手angularjs專案，第三個月加入react重構專案。心生感嘆：業務驅動式學習是一種高效率的學習方式，保持好奇心，在業務中快速成長！ 新專案中在package.json中有一個proxy欄位，這是我從來沒接觸過的，因此就有了此文的誕生，我使用create-react-app 新建了一個最原始狀態的專案，對proxy欄位與create-react-app之間的糾葛展開了學習。

在npm-configuration中，對proxy有如下解釋：

預設值為null，型別為url，一個為了傳送http請求的代理。如果HTTP__PROXY或者http_proxy環境變數已經設定好了，那麼proxy設定將被底層的請求庫實現。

這個proxy欄位目前我只瞭解到可以與create-react-app的react-scripts結合使用:Proxying API Requests in Development，react-scripts應該是基於HTTP_PROXY環境變數做了一些封裝。

閱讀完本文，你將有一以下收穫：

  • 如何更優雅地為前端專案配置代理Proxy伺服器
  • 復現之前啃《HTTP權威指南》代理相關的知識
  • 對easy-mock的使用限制有了新的認識
  • 對process.env可以直接在React層展示感到震驚
  • 瞭解到對process.env可以進行擴充套件的dotenv和expand-env兩個庫

主要分為3部分：

  • 開發過程中的Proxy API 請求設定
  • 手動配置proxy
  • 環境變數式配置Proxy

開發過程中的Proxy API 請求設定

注意：這個特性可以在[email protected]以及更高版本中使用。

人們通常從將服務於後端實現的host和port，同樣也為前端react應用提供服務。 例如，在一個應用部署後，生產配置類似下面這樣：

/                   -靜態伺服器返回React應用和index.html
/todos         -靜態伺服器返回React應用和index.html
/api/todos   -伺服器會使用後端實現去處理所有/api/*的請求
複製程式碼

但其實這樣的設定不是必須的。然而，如果你確實有一個這樣的設定，在不考慮重定向它們到其他的host和port開發環境下，那麼寫出像fetch('/api/todos')這樣的請求時正常的。

為了告訴開發環境的伺服器去代理任何開發環境中未知的請求到我們自己的api伺服器，新增一個proxy到package.json的欄位，例如：

"proxy":"http://localhost:4000"
複製程式碼

使用這種形式的話，當你在開發環境中使用fecth('api/todos')的時候，開發環境的伺服器將識別出這不是一個靜態資源，然後將代理轉發你的請求到http://localhost:4000/api/todos 作為一個回撥。生產環境伺服器只能代理沒有text/html在Accept頭中的請求。

方便的是，這就避免了CORS問題以及類似像下面這樣的錯誤資訊。

Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
複製程式碼

要知道proxy只有在開發環境中會有副作用，而且類似/api/todos 這樣的URL在生產環境中是否指向正確取決於我們。你不需要使用/api字首。任何沒有text／html請求頭的未識別的請求將會被代理到配置的伺服器。

proxy選項支援HTTP，HTTPS以及WebSocket連線。 如果proxy選項還不夠靈活的話，你可以去做自定義：

工科男的執著：） 為了更好的說明問題，我們來做一次本地實驗：

  • 啟動服務
npx creat-react-app my-app
cd my-app
npm run start
複製程式碼
  • 引入axios併發送請求
npm i axios --save
複製程式碼
componentDidMount(){
    axios.get('/foo')
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
}
複製程式碼

請求傳送："http://localhost:3000/foo" 錯誤資訊：404

我們為package.json新增proxy伺服器：

"proxy":"http://0.0.0.89:7300"
複製程式碼

ctrl + s 熱更新react程式碼後，沒有生效，依舊報404的錯誤。

npm run start 重啟本地服務後，代理伺服器生效，返回正常的資料。

實現了自動將"http://localhost:3000" 請求轉發到"http://0.0.0.89:7300" 的伺服器。

不知道聰明的你們發現沒有，我們並沒有遇到CORS問題，因為在瀏覽器眼裡，我們還是將請求傳送到"http://localhost:3000" 中的，它並不知道creat-react-app已經將請求轉發到了"http://0.0.0.89:7300" 這個所謂的會觸發瀏覽器CORS安全策略的其他Origin。

天真的瀏覽器：

segmentfault.com/img/bVbdNRf

請求傳送路徑： "http://localhost:3000" →"http://0.0.0.89:7300/foo"

響應返回路徑： "http://0.0.0.89:7300/foo" →"http://localhost:3000" 備註： 1.此處需要重新執行npm run start 重啟本地服務，否則在package.json中設定的proxy不會被檢測到並生效。 2.此處的伺服器可以是公司內網某臺虛擬機器上的啟動的node服務，也可以是easy-mock等mock伺服器（僅支援公司內網部署版，大搜車公網線上伺服器不支援）。

因此我們得出一個結論：

creat-react-app腳手架可以結合package.json中的proxy實現請求轉發。

實驗成功！

手動配置proxy

注意：這個特性可以在[email protected]以及更高版本中使用。

如果proxy的預設配置不夠靈活，可以在package.json自定義一個像下面這樣形式的物件。 你也可以http-proxy-middleware或者http-proxy去實現。

{
    “proxy”:{
        "/api":{
            "target":"<url>",
            "ws":true 
        }
    }
}
複製程式碼

所有與這個路徑相互匹配的請求將被代理轉發。這包括了text/html型別的請求，這種型別是標準proxy選項不支援的。

如果你需要配置多個代理，你需要在定義幾個入口。匹配規則還是那樣，這樣你才能使用正則匹配多個路徑。

{
  // ...
  "proxy": {
    // Matches any request starting with /api
    "/api": {
      "target": "<url_1>",
      "ws": true
      // ...
    },
    // Matches any request starting with /foo
    "/foo": {
      "target": "<url_2>",
      "ssl": true,
      "pathRewrite": {
        "^/foo": "/foo/beta"
      }
      // ...
    },
    // Matches /bar/abc.html but not /bar/sub/def.html
    "/bar/[^/]*[.]html": {
      "target": "<url_3>",
      // ...
    },
    // Matches /baz/abc.html and /baz/sub/def.html
    "/baz/.*/.*[.]html": {
      "target": "<url_4>"
      // ...
    }
  }
  // ...
}
複製程式碼

工科男的執著，繼續來做一個實驗：

依然使用上面的my-app專案，proxy配置如下：

"proxy":{
    "/api": {
      "target": "http://0.0.0.89:7300",
      "ws": true
    },
    "/foo": {
      "target": "http://0.0.11.22:8848",
      "ws": true,
      "pathRewrite": {
        "^/foo": "/foo/beta"
      }
    }
}
複製程式碼

程式碼如下：

    axios.get('/api')
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
    axios.get('/foo')
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
複製程式碼

執行結果： api介面和之前一致，我們這裡主要看重定向的foo介面。

請求傳送路徑： "http://localhost:3000" →"http://0.0.11.22:8848/foo" →"http://0.0.11.22:8848/foo/beta"

響應返回路徑： "http://0.0.11.22:8848/foo/beta" →"http://localhost:3000"

可以配置對個代理，我們此處使用的是"http://0.0.0.89:7300" 和"http://0.0.11.22:8848" 這個兩臺代理伺服器，其中 "http://0.0.0.89:7300" 提供了api介面，"http://0.0.11.22:8848" 提供了foo介面。而且我們可以在代理伺服器上重定向介面。

因此我們得出一個結論：

creat-react-app腳手架可以結合package.json中的proxy，可以配置對個代理，而且我們可以在代理伺服器上重定向介面。

實驗成功！

環境變數式配置proxy

這個功能在[email protected]及更高本版中適用。

react的專案可以使用已經宣告好的環境變數，這些變數就像是在你的js檔案中定義的本地變數一樣。預設情況下，已經有NODE_ENV預設環境變數，以及其他的以REACT_APP_為字首的環境變數。

**環境變數在構建期間是被嵌入進去的。**因為Create React App提供了靜態的HTML/CSS/JS打包，不能在runtime時被讀取到。為了在runtime期間讀取到環境變數，你需要還在HTML到伺服器的記憶體，並且在執行時替換佔位符，就像這裡描述的這樣：Injecting Data from the Server into the Page。另外你可以在任何你更改他們的時間裡重新構建應用。

你需要使用REACT_APP_建立通用的環境變數。除了NODE_ENV之外的任何其他的變數將被忽略，這是為了避免exposing a private key on the machine that could have the same name。執行期間，只要你修改了環境變數，就需要重啟開發伺服器。

這些環境變數將被定義在process.env。例如，有一個名叫REACT_APP_SECRET_CODE的環境變數，它可以通過process.env.REACT_APP_SECRET_CODE暴露在我們的javascript檔案中。

我們這裡同樣也有一個內建的叫做NODE_ENV的環境變數。你可以通過process.env.NODE_ENV去讀取它。當你執行npm start時，NODE_ENV的值是development，當你執行npm test時，NODE_ENV的值是test，而且當你執行npm run build構建生產環境的包的時候，它通常是production。**你不能的手動覆蓋NODE_ENV。**這樣可以預防開發者錯把開發環境的程式碼部署到生產環境。

這些環境變數可以用於根據專案的部署位置或使用超出版本控制的敏感資料來有條件地顯示資訊。

首先，你需要一個已經定義的環境變數。例如，你想在form表單中控制一個secret變數。

render(){
    return (
        <div>
            <small>你的應用執行在<b>{process.env.NODE_ENV}</b>模式。</small>
            <form>
               <input type="hidden" defaultValue={process.env.REACT_APP_SECRET_CODE} />
            </form>
        </div>
    );
}
複製程式碼

在構建期間，process.env.REACT_APP_SECRET_CODE將會被環境變數中的當前值替代。謹記NODE_ENV是自動設定的變數。

當你在瀏覽器檢視input時，它已經被設定成了abcde（或者是空）。 上面的表單從環境變數中搜索一個名叫REACT_APP_SECRET_CODE的變數。為了使用這個值，我們需要將其定義在環境中。使用兩種方式可以做到，一種是在shell中定義，一種是.env檔案中。

可以通過NODE_ENV去對一些操作進行控制：

if(process.env.NODE_ENV !== 'production'){
   analytics.disable();
}
複製程式碼

當你使用npm run build編譯app時，將會使檔案變得更小。

在HTML中引用環境變數：

注意：這個特性在[email protected]以及更高版本中使用。

你可以在public/index.html中獲取到以REACT_APP_為字首的環境變數。例如：

%REACT_APP_WEBSITE_NAME%

注意事項：

  • 除了內建變數(NODE_ENV和PUBLIC_URL)，變數名必須以REACT_APP_開頭才能正常工作。
  • 構建期間環境變數可以被注入進去。如果你想在執行期間注入它們，採用這個方法：Generating Dynamic Tags on the Server

在shell中新增臨時的環境變數 對於不同的作業系統，環境變數的設定是不同的。但是更加需要注意的是，這是建立變數的方式僅僅是當前shell session視窗有效。

Linux和macOS(Bash)

REACT_APP_SECRECT_CODE=abcdef npm start
複製程式碼

還有一種建立.env檔案定義環境變數的方式。

.env檔案將被檢如原始碼控制。

其他.env檔案將怎麼使用？

這個特性僅在[email protected]及更高中使用 使用dotenv可以將.env中的值注入到process.env中。例如：

require('dotenv').config()
複製程式碼

在專案的根目錄定義一個.env檔案並鍵入如下內容：

DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3
複製程式碼

然後就可以在process.env中訪問到了：

const db = require('db')
db.connect({
  host: process.env.DB_HOST,
  username: process.env.DB_USER,
  password: process.env.DB_PASS
})
複製程式碼
.env: Default.
.env.local: Local overrides. 載入除了test之外的環境變數。
.env.development, .env.test, .env.production: 公用的環境變數。
.env.development.local, .env.test.local, .env.production.local:本地的環境變數。
複製程式碼

左邊的比右邊的優先順序高：

npm start: .env.development.local, .env.development, .env.local, .env
npm run build: .env.production.local, .env.production, .env.local, .env
npm test: .env.test.local, .env.test, .env (note .env.local is missing)
複製程式碼

如何將系統環境變數擴充套件到我們專案下的.env檔案使用：

使用dotenv-expand

REACT_APP_VERSION=$npm_package_version
# also works:
# REACT_APP_VERSION=${npm_package_version}
複製程式碼

在.env檔案內部也可以使用變數：

DOMAIN=www.example.com
REACT_APP_FOO=$DOMAIN/foo
REACT_APP_BAR=$DOMAIN/bar
複製程式碼

工科男的執著：） 簡單做個實驗：

touch .env
code .env
複製程式碼

鍵入：

DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3
複製程式碼

程式碼：

console.log("process.env.DB_HOST-->%s,process.env.DB_USER-->%s,process.env.DB_PASS-->%s",process.env.DB_HOST,process.env.DB_USER,process.env.DB_PASS)
複製程式碼

實驗結果：

process.env.DB_HOST-->undefined,process.env.DB_USER-->undefined,process.env.DB_PASS-->undefined
複製程式碼

實驗結果並不總是令人滿意，問題在於不知道在何處require('dotenv').config()，可能需要在node層引入，也可能需要藉助webpack之類的工具，使得view層能訪問到。

實驗失敗。 做一下總結：

  • 開發過程中的Proxy API 請求設定(預設選型，滿足大多數情況下需求)
  • 手動配置Proxy （可實現多代理，重定向）
  • 環境變數式配置Proxy (臨時變數方式簡單易用，.env方式較為複雜，可以使用配置檔案代替)

努力成為優秀的前端工程師！如何理解package.json中的proxy欄位？

相關推薦

如何理解 package.json 中的 proxy 欄位？

入職新公司以來，第一個月接手vue專案，第二個月接手angularjs專案，第三個月加入react重構專案。心生感嘆：業務驅動式學習是一種高效率的學習方式，保持好奇心，在業務中快速成長！ 新專案中在package.json中有一個proxy欄位，這是我從來沒接觸過的，因此就有了此文的誕

http請求資料返回json中string欄位包含unicode的轉碼

public static String decodeUnicode(String theString) {            char aChar;            int len = theString.length();            StringBuffer outBuffer = 

Shell_Shell 程式設計 （持續更新） 提取JSON 中指定欄位的值

在平時工作中，我們有時候需要對JSON 的某一個欄位進行提取， 樣例資料 ： {"a1":22,"a2":"23"} {"a2":"23","a1":2233,a3:"22"}   可以使用 grep 完成功能： grep -Po 'test[" :]+\K[

package.json檔案中 script欄位 --摘自阮一鋒日誌

npm 允許在package.json檔案裡面，使用scripts欄位定義指令碼命令。 { // ... "scripts": { "build": "node build.js" } } 上面程式碼是package.json檔案的一個片段，裡面的scri

package.json中版本理解

bsp 滿足 ack pac one isp .json style Bugfix 一個完整的版本號可以理解為： [主要版本號，次要版本號，補丁版本號]版本號 x.y.z ：其中z 表示一些小的bugfix, y表示一些大的版本更改，比如一些API的變化x表示一些設計的變動

idea ssm專案出現日誌中文亂碼，封裝的json中的msg欄位中文亂碼（但是json封裝的bean中的欄位不亂碼）等其他各種專案下的中文亂碼解決方案

   開頭劃重點！（敲黑板）：rebuild和mvn package的迴圈往復好幾次的操作是解決這個問題的最主要的方法！ 經過多次試驗，發現這樣做就可以正常顯示中文了 我說為什麼有時候亂碼，有時候中文正常，原來下面的這些地方都必須設定好，特別是 rebuild和m

深入理解Java中的欄位與屬性的區別

1、Java中的屬性和欄位有什麼區別？  答：Java中的屬性(property)，通常可以理解為get和set方法。 而欄位(field)，通常叫做“類成員”，或 "類成員變數”，有時也叫“域”，理解為“資料成員”，用來承載資料的。 這兩個概念是完全不同的。 2、屬性

package.json中devDependencies與dependencies的區別

install 安裝插件 route develop all 我們 插件 npm安裝 .json 前言：之前一直不懂既然都是項目的依賴，為什麽要分成兩個部分，devDependencies和dependencies，有什麽區別？安裝方式我們在通過npm安裝插件或庫時，有三種

從package.json中獲取屬性

pack tps .json over href from version span package var pjson = require(‘./package.json‘); console.log(pjson.version); 詳見：https://stack

package.json中的 ^與~

emp 重新安裝 重新 front 版本 插入 開發階段 指定版本 rdquo 一、關於^ 和 ~ 轉自：package.json的 ^~ 指定版本：比如1.2.2，遵循“大版本.次要版本.小版本”的格式規定，安裝時只安裝指定版本。波浪號（til

angular package.json中start build

AS -c config ase tar -- rod HR tput "start": "ng serve --host 0.0.0.0 --port 4200 --proxy-config proxy.conf.json", "build": "ng build

package.json 中 scripts

webpack spec ack develop ebp echo span evel star "name": "webpack-study1", "version": "1.0.0", "main": "index.js", "scripts": { "t

sql中去掉欄位的所有空格

字元前的空格，用ltrim(string)  字元後的空格，用rtrim(string)  字元中的空格，用replace(string, ' ', ' ') 例 update qx_users set `NAME`=rtrim(NAME) update qx_u

orcale 查找出兩個表中相同欄位的不同的值minus

1.user表 SELECT user_id FROM OA_COMPANY_USER 2.專案表中投入過的人員 SELECT DISTINCT a.USER_ID FROM OA_COMPANY_USER a, OA_PM_PERSON_INPUT b WHERE a.

資料庫中敏感欄位的標記、標示

資料治理需要面臨和解決的最重要的問題是，企業這麼多的資料庫，每個資料庫這麼多的表，每個表這麼多的欄位，如何進行資訊資產的分類分級。 通過以下方法，可以自動的取企業所有資料庫、所有表、所有欄位，根據欄位的值，利用正則表示式等方式判斷此欄位是否屬於使用者敏感資訊，如姓名、手機、地址、身份證等。 最終形成資料的

將oracle中的欄位和表名全部修改為小寫

在建立表和表結構的時候，如果想要小寫需要在名稱上面新增雙引號，如果不新增oracle資料庫會預設識別為大寫 1.將表名和欄位名改為大寫 批量將表名變為大寫 begin    for c in (select table_name tn from user_tabl

通過stream()方法，一條程式碼計算List集合中相同欄位的結果。

一、下面寫了一個例子 定義一個User類 package com.newframe.controllers.api; import lombok.Data; import java.math.BigDecimal; /** * @author:wangdong * @d

java反射機制——獲取位元組碼對應類中的欄位

package cn.itcast.reflect.demo; import java.lang.reflect.Field; public class ReflectDemo3 { public static void main(String[] args) throws ClassNot

Mysql中 BLOB欄位轉String的方法

轉：https://www.cnblogs.com/renjie0520/p/5242350.html 1.通過sql直接轉換 select CONVERT (*** USING utf8) AS userName from usertable; 2.通過程式轉換(注

MySQL中去除欄位中的回車符和換行符

今天處理資料的時候，將Excel資料匯入MySQL後，通過SQL語句卻查不到需要的資料，後來找到一篇帖子解決了這個問題，原文地址：https://blog.csdn.net/u012586848/article/details/50997865，內容如下： 問題： 在使用【 load data