跨域問題及Umi中使用proxy代理解決跨域問題

很白的小白發表於2022-11-24
跨域

1.為什麼會出現跨域問題？

  • 跨域問題的出現：是由於瀏覽器的同源策略導致的。
  • 同源策略：同源策略是瀏覽器是瀏覽器最核心也最基本的安全功能，因此其主要目的是為了安全，如果沒有同源限制，在瀏覽器中的cookie等其他資料可以任意讀取，不同域下的DOM任意操作，ajax任意請求其他網站的資料，包括隱私資料。

  • 同源策略限制三種操作：
    1、cookie，localstorage，IndexedDB無法讀取
    2、DOM無法獲取
    3、Ajax請求不能傳送

    2.什麼是跨域？

    當一個請求url的協議、域名、埠三者之間任意一個與當前頁面url不同即為跨域。

當前頁面url被請求頁面url是否跨域原因
http://www.test.com/http://www.test.com/index.html否同源（協議、域名、埠號相同）
http://www.test.com/https://www.test.com/index.html是協議不同（http/https）
http://www.test.com/http://www.baidu.com/是主域名不同（test/baidu）
http://www.test.com/http://blog.test.com/是子域名不同（www/blog）
http://www.test.com:8080/http://www.test.com:7001/是埠號不同（8080/7001）

3.Umi產生CORS錯誤的及解決舉例：

  • CORS錯誤的產生：
    首先：用node發起了一個http://localhost:8080 的服務；
    那麼在這個伺服器下訪問的網頁也就是預設在 http://localhost:8080 這個域下面；
    然後：假設服務端所在的域是http://example.com；
    這樣透過ajax傳送請求的話;
    此時：由客戶端直接傳過去的就是一個域名為 http://localhost:8080 的請求；
    而服務端所在的域是 http://example.com；
    雖然協議相同，但是域名不同，跨域請求失敗；
  • 代理解決跨域的原理：將代理層作為在客戶端和服務端之間的中間層，代理層的作用就是將不同的域名轉換為相同的域名。

  • 代理解決跨域問題原理圖解及過程：
    image.png
    首先：客戶端傳送請求，先經過代理層的處理，將域名http://localhost:8080轉換為了http://example.com；將域名轉換之後再將請求傳送到服務端；
    然後，服務端接收到的請求的域名就為http://example.com；
    因此，同理，服務端將響應傳送回客戶端的時候，響應也是先經過代理層的處理，將響應的域名http://example.com轉換為了http://localhost:8080；這是客戶端接收到的響應的域名也和自己的域名相同了。

    umi使用proxy代理解決跨域

    1.首先找到confige.js檔案，配置如下：

  proxy: {
    '/api': {// 標識需要進行轉換的請求的url
      target: 'http://example.com/',// 服務端域名
      changeOrigin: true,// 允許域名進行轉換
      pathRewrite: { '^/api': '' },// 將請求url裡的api去掉
    }
  },

2.在src/utils/ip.js配置如下：

function remoteLinkAddress() {
  const IPaddress = `/api`;
  return IPaddress;
}

export default remoteLinkAddress;

此時，我們發出的請求http://localhost:8080/api/xx/xx，當這個url傳送到代理層時，proxy檢測到'/api'標識，將域名更換為http://example.com/api/xx/xx，然後將請求url中的/api去掉，這樣我們傳送到伺服器端的Url：http://example.com/xx/xx；

另附：前端跨域請求的多種方式

參考資料：

理解尚淺，望不吝賜教！

相關文章