為什么會跨域

一般情況下，當(dāng)瀏覽器向不同 源(協(xié)議、IP、端口)的資源發(fā)出請求時，會報錯誤如下：

這就是 跨域 問題。

跨域是因為瀏覽器的同源策略所導(dǎo)致的。

什么是同源策略

瀏覽器出于安全的考慮做了同源策略的限制。源指的是協(xié)議、IP、端口。 協(xié)議、IP、端口 必須全都相同才是同源。

解決方案

1. JSONP

只支持 Get 請求，并且只能接收 json 格式的數(shù)據(jù)，還容易收到 XSS 攻擊。不推薦。

<script>
    function handleResponse(res) {
      console.log(res);
    }

    var script = document.createElement('script');
    script.src = 'https://10.2.2.25/api?callback=handleResponse';
    document.head.appendChild(script);
</script>

其實就是動態(tài)創(chuàng)建一個 script 標(biāo)簽，并在標(biāo)簽里加入 callback 參數(shù), 然后在回調(diào)函數(shù)里處理后端返回的數(shù)據(jù)。

2. CORS

官方推薦，后端處理，推薦。

CORS（Cross-Origin Resource Sharing）是一種官方推薦的跨域解決方案。它通過在服務(wù)器端設(shè)置響應(yīng)頭來允許跨域訪問。具體而言，服務(wù)器在響應(yīng)中添加 Access-Control-Allow-Origin 頭，并設(shè)置允許訪問的源地址。瀏覽器在收到這個響應(yīng)頭后，就會允許跨域訪問并將響應(yīng)數(shù)據(jù)返回給前端頁面。CORS 支持各種類型的 HTTP 請求，包括 GET、POST 等，并且具有較好的安全性。

3. proxy

既然跨域是瀏覽器導(dǎo)致的，那我們繞開瀏覽器就行了。使用代理也是常用的解決跨域的方案。

請求的資源跨域，我們可以請求自己同源的服務(wù)(代理)，然后通過代理去請求跨域的資源。常用的解決方案一般是兩種：

本地代理

開發(fā)環(huán)境，前端處理，推薦。

無論是 webpack 還是 vite 都內(nèi)置了本地代理。這讓我們能夠在不依賴后端的前提下解決跨域的問題(僅僅是本地開發(fā)環(huán)境下, 線上環(huán)境需要 nginx 配置反向代理)

webpack 的處理方式如下(官方文檔看這里):

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
};

vite 的處理方式(官方文檔看這里):

export default defineConfig({
  // ...
  server: {
    proxy: {
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

nginx 反向代理

生產(chǎn)環(huán)境，運維處理，推薦。

生產(chǎn)環(huán)境一般用 nginx 托管部署我們的前端代碼包。處理跨域問題需要 nginx 配置反向代理。

server {
    listen: 8001;
    server_name 10.2.2.25;

    location ~ /api/ {
        proxy_pass http://127.0.0.1:8081;
    }
}

參考文檔

Web 安全開篇：瀏覽器為什么會有同源策略？