webpack是一款很好用的打包工具，同時它還可以建立一個本地伺服器，是你的前端程式碼可以在伺服器的環境下執行。

proxy

（1）代理路由

proxy是webpack中devServer的一個配置，主要是用來代理某些URL的。

proxy: {
  "/api": "http://localhost:3000"
}

像這樣，執行webpack就可以實現代理的效果了，這時候你請求介面/api/users時，webpack伺服器自動就會把請求的路由換成http://localhost:3000/api/users。

（2）路由重寫

假如說你不想使用/api，那麼我們可以重寫一下路由：

proxy:{
	"/api":{
		target:"http://localhost:3000",
		pathRewrite:{
			"^/api":""
		}
	}
}

這樣我們那就不需要加上api了，可以直接請求/users，webpack會自動將請求代理到http://localhost:3000/users上。

（3）使用https協議

當然，現在很多的網站使用的都是https協議了，而webpack伺服器預設是不接受執行在https上，且使用了無效證書的後端伺服器。不過我們又很想用怎麼辦？不用擔心。proxy有一個可以允許使用https的屬性

secure:true

這個屬性預設是false，假如我們想要使用https的話，就需要在配置項裡面，將這個屬性改成true就好了。

（4）改變origin進行跨域

在寫前端的時候，經常會碰到跨域問題，這時候我們就可以使用proxy中的changeOrigin屬性，改變請求的根路由，這樣就可以進行跨域請求了。

當然，proxy的配置不止這些，如果感興趣的同學可以去官網學習一下

vue中的代理跨域

如果我們是使用vue開發我們的專案，我們只需要在專案中的config/index.js中找到proxyTable屬性，這個屬性就是webpack中的proxy屬性。改過之後就可以跨域請求了。

react中跨域請求

使用create-react-app建立專案的同學開啟專案的時候可能找不到webpack的配置檔案，這不是因為react沒有引入webpack，而是通過其他的方式將webpack引入進來了。
接下來我教大家怎樣找webpack配置檔案。

1、開啟package.json檔案，找到專案的啟動指令react-scripts；
2、在node_modules中找到react-scripts資料夾，然後開啟config資料夾，就可以看到他的webpack配置檔案了。

雖然我們找到他的配置檔案了，不過你會發現一件很詭異的事情，竟然找不到他的proxy配置項在哪裡。難道他沒有這一項？
當然不是，開啟webpackDevServer.config.js檔案，搜尋一下proxy，你會看到在他的module.exports暴露的函式中有一個，他就是我們需要的配置項。
有同學想問了，那該怎麼配置呢？其實很簡單，開啟你的package.json檔案，在這裡面照著你的proxy選項配置，配置完成後執行一下，你會發現竟然奇蹟的可以了。

注意

以上教程只針對於使用依賴於webpack伺服器的專案，如果是打包過的專案則不支援。