webpack proxy ,就是 webpack 提供的解決跨域的方案。其基本行為是接受客戶(hù)端發(fā)送的請(qǐng)求后轉(zhuǎn)發(fā)給其他的服務(wù)器，目的是為了解決在開(kāi)發(fā)模式下的跨域問(wèn)題。

原理

webpack中的proxy 工作原理是利用了 http-proxy-middleware 這個(gè)http 代理中間件，實(shí)現(xiàn)將請(qǐng)求轉(zhuǎn)發(fā)給其他的服務(wù)器。

如下：在開(kāi)發(fā)階段，本地地址是 Http://loaclhost:3000 , 該瀏覽器發(fā)送一個(gè)前綴帶有 /api 標(biāo)識(shí)的向服務(wù)器請(qǐng)求數(shù)據(jù)，但是這個(gè)服務(wù)器只是將這個(gè)請(qǐng)求轉(zhuǎn)發(fā)給另一臺(tái)服務(wù)器：

const express = require('express');
const proxy = require('http-proxy-middleware');
const app = express();
app.use('/api', proxy({target: 'http://www.test.org', changeOrigin: true}));
app.listen(3000);
// http://localhost:3000/api/foo/bar -> http://www.test.org/api/foo/bar

在開(kāi)發(fā)階段，webpack-dev-server 會(huì)自動(dòng)啟動(dòng)一個(gè)本地開(kāi)發(fā)服務(wù)器，所以我們的應(yīng)用在開(kāi)發(fā)階段是獨(dú)立運(yùn)行在 localhost 的一個(gè)端口上的，而后端服務(wù)器又是運(yùn)行在另一個(gè)地址上.。

所以在開(kāi)發(fā)階段中，由于瀏覽器的同源策略，當(dāng)本地瀏覽器訪(fǎng)問(wèn)后端服務(wù)器的時(shí)候就會(huì)出現(xiàn)跨域請(qǐng)求資源的問(wèn)題。

通過(guò)設(shè)置 webpack proxy 實(shí)現(xiàn)代理請(qǐng)求后，相當(dāng)于瀏覽器和服務(wù)器之間添加了一個(gè)代理服務(wù)器。
當(dāng)本地發(fā)送請(qǐng)求的時(shí)候，中間服務(wù)器會(huì)接受這個(gè)情求，并將這個(gè)請(qǐng)求轉(zhuǎn)發(fā)給目標(biāo)服務(wù)器（也就是后端服務(wù)器），目標(biāo)服務(wù)器返回?cái)?shù)據(jù)后，中間服務(wù)器又會(huì)將數(shù)據(jù)返回給瀏覽器，當(dāng)中間服務(wù)器將數(shù)據(jù)返回給服務(wù)器的時(shí)候，它們兩者是同源的，并不會(huì)存在跨域的問(wèn)題。

服務(wù)器和服務(wù)器之間是不會(huì)存在跨域資源的問(wèn)題的。

webpack-dev-server

webpack 提供代理服務(wù)器的工具是webpack-dev-server，但只適用于開(kāi)發(fā)階段，線(xiàn)上要實(shí)現(xiàn)代理一般通過(guò) nginx 來(lái)配置。

webpack 中的服務(wù)器工具 webpack-dev-server，實(shí)質(zhì)上是啟動(dòng)了一個(gè) express 服務(wù)器。

proxy 代理是利用 http-proxy-middleware 這個(gè)http代理中間件實(shí)現(xiàn)將請(qǐng)求轉(zhuǎn)發(fā)給其他服務(wù)器。
（vite 是用的 http-proxy，其實(shí) http-proxy-middleware 也是基于 http-proxy 的）

背后其實(shí)都是使用 node 來(lái)啟動(dòng) server 服務(wù)器，這也是為什么我們常說(shuō)這種代理只能在開(kāi)發(fā)階段使用，因?yàn)?build 生產(chǎn)包時(shí)我們并不會(huì)打包一個(gè) node 服務(wù)器進(jìn)去，線(xiàn)上要實(shí)現(xiàn)代理一般直接通過(guò) nginx 來(lái)配置。

可以在webpack 配置對(duì)象屬性中通過(guò) devServer 屬性來(lái)配置：

// ./webpack.config.js
const path = require('path')
module.exports = {
    // ...
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000,
        proxy: {
            '/api': {
                target: 'https://api.github.com'
            }
        }
        // ...
    }
}

webpack-dev-server常用的配置項(xiàng)

Proxy代理

它的目的是設(shè)置代理來(lái)解決跨域訪(fǎng)問(wèn)的問(wèn)題。舉例：
我們的一個(gè)api請(qǐng)求地址（也就是服務(wù)器地址）是 http://localhost:8888，
但是本地啟動(dòng)服務(wù)器的域名是 http://localhost:8000，
這個(gè)時(shí)候發(fā)送網(wǎng)絡(luò)請(qǐng)求就會(huì)出現(xiàn)跨域的問(wèn)題（端口不同）。
所以將請(qǐng)求先發(fā)送到一個(gè)代理服務(wù)器，代理服務(wù)器和API服務(wù)器沒(méi)有跨域的問(wèn)題，就可以解決我們的跨域問(wèn)題了。

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {// 以 /api 開(kāi)頭的請(qǐng)求，會(huì)轉(zhuǎn)發(fā)到下面的 target 配置
        target: 'http://localhost:8888',// 目標(biāo)服務(wù)器
         pathRewrite: { 
          "^/api": "", // 重寫(xiě)路徑為空，即請(qǐng)求路徑中沒(méi)有/api字符串
          "^/api": "/abcd" // 重寫(xiě)路徑為abcd，即將請(qǐng)求路徑中的/api字符串替換成/abcd
        },
        secure: false,// https接口，需要配置這個(gè)參數(shù)
        changeOrigin: true,// 將請(qǐng)求頭中的host 配置為 target
      },
    },
     host: '0.0.0.0', //用于指定devDerve使用的host，如果你希望服務(wù)器外部可以訪(fǎng)問(wèn)，設(shè)定如 host: '0.0.0.0'
     https: true, // 默認(rèn)情況下dev-server使用http協(xié)議，通過(guò)配置可以支持https，
     // 注意：默認(rèn)使用自簽名證書(shū)，也可以配置自己的證書(shū)
     // https: {
     //     ca: './path/to/server.pem',
     //     pfx: './path/to/server.pfx',
     //     key: './path/to/server.key',
     //     cert: './path/to/server.crt',
     //     passphrase: 'webpack-dev-server',
     //     requestCert: true,
     // },
     // 開(kāi)啟熱模塊替換
     hot: true,
  },
};

• target：表示的是代理到的目標(biāo)地址（也就是要訪(fǎng)問(wèn)的服務(wù)器地址），比如 /api會(huì)被代理到 http://localhost:8888/api
• pathRewrite：默認(rèn)情況下，我們的 /api 也會(huì)被寫(xiě)入到URL中，即：http://localhost:8888/api, 如果希望刪除，可以使用pathRewrite，比如：
• 配置成 "^/api": "",那么/api/user => http://localhost:8888/user，地址中沒(méi)有/api，因?yàn)橹匦侣窂绞强盏模?/li>
• 配置成"^/api": "/abcd" ,那么/api/user => http://localhost:8888/abcd/user，即將請(qǐng)求路徑中的/api字符串替換成/abcd
• secure： 默認(rèn)情況下，不接受在 HTTPS 上運(yùn)行且證書(shū)無(wú)效的后端服務(wù)器。 https接口，需要配置這個(gè)參數(shù)為false；
• changeOrigin：它表示是否更新代理后請(qǐng)求的headers中host地址,一般設(shè)置為true

proxy配置中 changeOrigin: true,// 將請(qǐng)求頭中的host 配置為 target。
那為什么要更改請(qǐng)求頭中的host呢？

因?yàn)橐慌_(tái)服務(wù)器上可以部署多個(gè)項(xiàng)目，當(dāng)我們發(fā)送請(qǐng)求時(shí)，DNS 會(huì)將域名解析為 IP 地址，此時(shí)，也就確定了我們目標(biāo)服務(wù)器，那如何確定我們要訪(fǎng)問(wèn)的是哪個(gè)項(xiàng)目呢？這就需要用到 host 字段了。

請(qǐng)求頭中Host用來(lái)指定請(qǐng)求的 域名/ip地址和端口號(hào)，通常用于指定服務(wù)器的地址，端口號(hào)可以省略，省略時(shí)默認(rèn)為80端口。

此時(shí)我們將host指定為a.com就會(huì)訪(fǎng)問(wèn)到淘寶服務(wù)了。

所以如果一臺(tái)服務(wù)器上部署多個(gè)項(xiàng)目時(shí)，我們需要更改請(qǐng)求頭中的host，來(lái)指定我們要訪(fǎng)問(wèn)的項(xiàng)目。

一臺(tái)服務(wù)器只有一個(gè)項(xiàng)目時(shí)，我們可以不用更改請(qǐng)求頭中的host，因?yàn)镈NS解析后，就確定了我們要訪(fǎng)問(wèn)的項(xiàng)目。

但為了以后用起來(lái)方便，就統(tǒng)一將這個(gè)配置項(xiàng)changeOrigin設(shè)置為true。

host

devServer.host 配置項(xiàng)?于配置 DevServer 服務(wù)監(jiān)聽(tīng)的地址，默認(rèn)使? 8080 端?。 如果 8080 端? 已經(jīng)被其它程序占有就使? 8081，如果 8081 還是被占?就使? 8082，以此類(lèi)推

例如:
你想要局域?中的其它設(shè)備訪(fǎng)問(wèn)你本地的服務(wù)，可以在啟動(dòng) DevServer 時(shí)帶上 --host 0.0.0.0 ，
也可以在webpack配置項(xiàng)devServer.host中設(shè)置0.0.0.0
host 的默認(rèn)值是 127.0.0.1 即只有本地可以訪(fǎng)問(wèn) DevServer 的 HTTP 服務(wù)。

localhost 和 0.0.0.0 的區(qū)別：

localhost：本質(zhì)上是一個(gè)域名，通常情況下會(huì)被解析成127.0.0.1。127.0.0.1：回環(huán)地址(Loop Back Address)，表達(dá)的意思其實(shí)是我們主機(jī)自己發(fā)出去的包，直接被自己接收。

正常的數(shù)據(jù)庫(kù)包經(jīng)過(guò) 應(yīng)用層 - 傳輸層 - 網(wǎng)絡(luò)層 - 數(shù)據(jù)鏈路層 - 物理層 ，而回環(huán)地址，是在網(wǎng)絡(luò)層直接就被獲取到了，是不會(huì)經(jīng)過(guò)數(shù)據(jù)鏈路層和物理層的。

比如:
我們監(jiān)聽(tīng) 127.0.0.1時(shí)，在同一個(gè)網(wǎng)段下的主機(jī)中，通過(guò)ip地址是不能訪(fǎng)問(wèn)的。
0.0.0.0：監(jiān)聽(tīng)I(yíng)PV4上所有的地址，再根據(jù)端口找到不同的應(yīng)用程序，比如我們監(jiān)聽(tīng) 0.0.0.0時(shí)，在同一個(gè)網(wǎng)段下的主機(jī)中，通過(guò)ip地址是可以訪(fǎng)問(wèn)的

port、open、compress

devServer.port設(shè)置監(jiān)聽(tīng)的端口，默認(rèn)情況下是8080,不能設(shè)置為null,可以設(shè)置自動(dòng)為auto

module.exports = {
  //...
  devServer: {
    port: 8080, 
  },
};

devServer.open告訴 dev-server 在服務(wù)器已經(jīng)啟動(dòng)后打開(kāi)瀏覽器。設(shè)置其為 true 以打開(kāi)你的默認(rèn)瀏覽器。

module.exports = {
  //...
  devServer: {
    open: true,
    //在瀏覽器中打開(kāi)指定頁(yè)面：open: ['/my-page']
    //提供要使用的瀏覽器名稱(chēng)，而不是默認(rèn)名稱(chēng)
  // open: {
      //   app: {
      //  name: 'google-chrome',
    //  },
   // },
  },
};

devServer.compress告訴 dev-server 在服務(wù)器端啟用 gzip 壓縮，用于減少服務(wù)器向前端傳輸?shù)臄?shù)據(jù)量，提高瀏覽的速度。

module.exports = {
  //...
  devServer: {
    compress: true,
  },
};

參考

到此這篇關(guān)于webpack-dev-server原理解析及其中跨域解決方法的文章就介紹到這了,更多相關(guān)webpack-dev-server原理解析及其中跨域解決方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論