nodejs服務實現反向代理，解決本地開發接口請求跨域問題

先後端分離項目須要解決第一個問題就是，前端本地開發時如何解決經過ajax請求產生的跨域的問題。通常的作法是經過本地配置nginx反向代理進行處理的，除此以外，還能夠經過nodejs來進行代理接口。固然，要實現這個前提是，前端開發環境必須運行在nodejs服務中，所幸的是，如今前端的開發自動化工具都是創建在nodejs上的，因此這個前提也不是很重要。

webpack-dev-server配置跨域方案

若是你項目是用webpack做爲前端自動化構建工具的話，那麼能夠引用webpack-dev-server來進行配置跨域方案。webpack-dev-server是一個小型的nodejs服務器，是基於express框架的，用於實時監聽和打包編譯靜態資源。其中裏面有一個屬性是proxy，是專門來配置代理請求接口的。

舉個例子：

好比我如今經過webpack構建了一個本地開發環境，端口號是9000，如今我要在本地去請求(GET) http://jsonplaceholder.typicode.com/users 地址獲取數據，若是前端沒有設置代理的話，請求會由於跨域請求失敗。這時候經過以下配置，就能夠正常請求了。

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

經過如上配置，而後在js裏面這樣請求就能夠成功拿到數據了：

//使用fetch獲取ajax請求
fetch('/users')  //填寫路徑便可
  .then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log('parsed json', json)
  }).catch(function(ex) {
    console.log('parsing failed', ex)
  })

這是經過webpack-dev-server配置的代理方案，那若是沒有webpack-dev-server服務，要如何配置代理方案呢？好比在gulp和fis環境中，要怎麼設置nodejs的代理服務。這時候咱們就得來追尋下webpack-dev-server代理的實現機制了。

http-proxy-middleware模塊設置代理服務

若是仔細閱讀webpack-dev-server的文檔，就會發現其實webpack-dev-server的代理方案是引用了http-proxy-middleware模塊來設置的。這裏要注意的是http-proxy-middleware模塊也是運行在nodejs服務，所以前端須要運行一個nodejs服務，這裏以express爲例子：

var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();
app.use('/users', proxy({
    target: "http://jsonplaceholder.typicode.com",
    changeOrigin: true
}));
// 省略各類配置  ... ...
app.listen(..., 9000);

如上面代碼展現，咱們就能夠在本地端口9000訪問到 http://jsonplaceholder.typicode.com/users 的數據，其請求接口和上面一致。其實這段代碼跟webpack-dev-server代理很類似的，應該說同樣的，由於原本就是同一個東西的。在這裏就不作更多介紹了，若是須要了解更多直接去看官方文檔 https://github.com/chimurai/http-proxy-middleware