nodejs服務(wù)實(shí)現(xiàn)反向代理，解決本地開發(fā)接口請(qǐng)求跨域問題

前后端分離項(xiàng)目需要解決第一個(gè)問題就是，前端本地開發(fā)時(shí)如何解決通過ajax請(qǐng)求產(chǎn)生的跨域的問題。一般的做法是通過本地配置nginx反向代理進(jìn)行處理的，除此之外，還可以通過nodejs來進(jìn)行代理接口。當(dāng)然，要實(shí)現(xiàn)這個(gè)前提是，前端開發(fā)環(huán)境必須運(yùn)行在nodejs服務(wù)中，所幸的是，現(xiàn)在前端的開發(fā)自動(dòng)化工具都是建立在nodejs上的，所以這個(gè)前提也不是很重要。

webpack-dev-server配置跨域方案

如果你項(xiàng)目是用webpack作為前端自動(dòng)化構(gòu)建工具的話，那么可以引用webpack-dev-server來進(jìn)行配置跨域方案。webpack-dev-server是一個(gè)小型的nodejs服務(wù)器，是基于express框架的，用于實(shí)時(shí)監(jiān)聽和打包編譯靜態(tài)資源。其中里面有一個(gè)屬性是proxy，是專門來配置代理請(qǐng)求接口的。

舉個(gè)例子：

比如我現(xiàn)在通過webpack構(gòu)建了一個(gè)本地開發(fā)環(huán)境，端口號(hào)是9000，現(xiàn)在我要在本地去請(qǐng)求(GET) http://jsonplaceholder.typicode.com/users 地址獲取數(shù)據(jù)，如果前端沒有設(shè)置代理的話，請(qǐng)求會(huì)因?yàn)榭缬蛘?qǐng)求失敗。這時(shí)候通過如下配置，就可以正常請(qǐng)求了。

devServer: {
   contentBase: __dirname + "/",
   port: 9000,
   proxy: {     "/users": {    //需要代理的路徑
       target: "http://jsonplaceholder.typicode.com",  //需要代理的域名
       changeOrigin: true  //必須配置為true，才能正確代理     }
   }
}

通過如上配置，然后在js里面這樣請(qǐng)求就可以成功拿到數(shù)據(jù)了：

        		
網(wǎng)友評(píng)論