跨域問題及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

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

參考資料:

理解尚淺,望不吝賜教!

相關文章