怎麼利用webpack處理跨域請求

這次帶給大家怎麼利用webpack處理跨域請求，利用webpack處理跨域請求的注意事項有哪些，以下就是實戰案例，一起來看一下。

在前端調試的時候，跨域一直都是一個比較麻煩的問題，這個在之前的文章 關於跨域問題的一個解決方法 中其實已經討論了一些可以使用的方法。

如果要使用 JSONP，第一是需要修改的地方比較多，而且也不太符合前端發展的大趨勢，如果使用 CORS 的話並沒有 application/json 類型。而且更重要的是這只是前端調試時候的需求，不是上線以後的需求，所以對後端有太多的入侵也不好。

所以就有一個念想突然在腦中閃過－－加入有一個代理不就可以解決這個問題了？但是又想了一下寫起來還挺麻煩，於是就被擱置了。

直到前幾天 Stone 提到其實 webpack-dev-server 早就想到並且已經幫我們實現了。

於是，我就在一個 Vue 專案中進行測試，發現真的很讚，既可以本地 Server 熱加載，還可以直接跨域調用遠端 API，完美解決了之前遇到的所有問題。

接下來我要簡單介紹一下步驟（以一個Vue 鷹架建立的webpack 專案為例）：

先檢查build/webpack.dev.conf.js 中是否有

proxy: config.dev.proxyTable,

這個配置項，如果被註解掉，請開啟註釋，如果沒有，請加入devServer 物件中

然後在config/index.js 中的dev 物件中加入proxyTable 設定項：

proxyTable: {
   '/**': {
    target: 'http://api.xxx.com',
    changeOrigin: true,
    secure: false
   }
  },

前面的鍵/** 意思是代理所有請求，如果代理某些請求，可以將其改為諸如/api 之類的字串。

後面的target 就是要代理到的網站，changeOrigin 的意思就是把http 請求中的Origin 欄位變換，在瀏覽器接收到後端回覆的時候，瀏覽器會以為這是本地請求，而在後端那邊會以為是站內的呼叫。

這樣，透過這個簡單的配置，就完美地解決了跨域的問題。

之後，在直接執行

npm run dev

的時候，就可以將測試前端中的 ajax 請求代理到後端伺服器進行測試啦！

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

使用Js實作Promise庫

#react如何對圖片進行裁切

以上是怎麼利用webpack處理跨域請求的詳細內容。更多資訊請關注PHP中文網其他相關文章！