Webpack 和 Vite 能解決跨域問題？憑什麼？

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

背景

我們平時在開發項目的時候，總會涉及到調用接口，調用接口就會涉及到跨域問題，那我們平時是怎麼去解決跨域問題的呢？

其實就我接觸過的項目，Cors 比較少用，倒是Nginx比較多用~

思考

我們剛剛說了，Nginx是後端配置允許跨域的手段，他的原理其實就是接口轉發~

我們想想跨域是因爲什麼？跨域是因爲同源策略，而同源策略只是侷限在瀏覽器而已，所以我們只要不在瀏覽器上請求，那就能解決跨域問題~

而Nginx大致原理就是這樣的，就是讓你在服務器上去發起請求，這樣就能解決跨域問題了。但是我們的請求是在瀏覽器上去發起的啊，怎麼才能讓我們的請求在服務器上去發起呢？所以就有了接口轉發 這個概念

舉個例子，現在有一個接口http://api.com:5000，我們瀏覽器直接去訪問的話會有跨域報錯，所以我們可以讓後端在服務器上起一個 Nginx 服務，我們自己的服務器是 http://sunshine.com，起的 Nginx 端口是 3000，並讓後端在 Nginx 上配置了接口轉發的邏輯

一切準備就緒我們現在想要訪問 http://api.com:5000 ，只需要訪問 http://sunshine.com :3000，它會幫我們去轉發請求 http://api.com:5000，這個時候請求就是服務器去發起的，這就解決了跨域問題~

前端怎麼做？

剛剛說的 Nginx 都是需要後端去配的，一般也是測試環境、生產環境的時候，纔會讓後端去配這個~

但是如果是本地開發的時候，沒有後端 Nginx 支持的時候，我們前端自己要怎麼做呢？其實前端構建工具爲我們提供瞭解決跨域的手段，那就是代理

Webpack和Vite都爲我們提供了代理的配置

module.exports = {
  // ...其他配置...
  devServer: {
    port: 3000,
    proxy: {
      '/': {
        target: 'http://api.com:5000'
      },
    },
  },
};

其實跟接口轉發沒兩樣，只不過換了個轉發的服務器罷了。

Nginx 是需要後端在服務器上去搭建一個端口服務來進行轉發

而我們前端在本地開發時也可以做類似的事情，就是可以在本地起一個 Node 服務，然後讓這個 Node 服務來幫我們做接口轉發，就不需要 Nginx 了~ 所以我們會看到，我們配置了 proxy 之後，我們訪問http://localhost:3000，但是實際訪問到的是http://api.com:5000

所以Webpack和Vite解決跨域的方式就是接口轉發，方式就是在本地起一個 Node 服務來進行接口轉發

http-proxy

那是Webpack和Vite是怎麼去起 Node 服務去進行接口轉發的呢？其實他們底層實現的原理都是一樣的，都是用到了一個庫http-proxy，這是一個專門做代理轉發的庫

就拿剛剛的例子來說吧，我想要訪問http://localhost:3000，但是實際訪問到的是http://api.com:5000，所以需要這麼去用http-proxy

const httpProxy = require("http-proxy");

httpProxy
  .createServer({
    // 目標接口
    target: "http://api.com:5000",
  })
  .listen(3000);

其實 http-proxy 的原理也不復雜，拿上面例子來講，主要分爲幾步

源碼也不多，大家可以有空多看看這種超級牛的老庫，學習學習人家的編碼思想~

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/WfS7jsZ-o0srd8oSNONQ2A

猜你喜歡