前端攻城獅

前后端分離項目需要解決第一個問題就是，前端本地開發時如何解決通過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