谁说前端需要懂 Nginx 了？

--读《谁说前端不需要懂-Nginx反向代理与负载均衡》有感

读了上文发现内容虽然还是挺好的，但看完，为啥要懂nginx呀，负载均衡和前端哪里有什么半毛钱关系了，没说清楚呀。

当然这个面向前端做个科普文让大家多知道一项只是还是不错的，文章拉到最后面看了下作者的使用场景举例说起个 host 给让产品走查。 这不就是起个webserver 容器么，和反向代理么？

这篇内容很热，结合最近聊天群里总是有人问起，我想前端还有很多人想知道这方面知识的，所以在这里也科普下，常用的代理方式有哪些。

本文广受朋友喜爱，说明对很多朋友还是有帮助的，另外不少网友对本文的标题意见很大，本文的标题针对引文标题来说，主旨为的是强调有更合适的方法做更正确的事情，并不阻止大家学习更多知识

招式一、 使用 http-server 模块进行代理

熟悉 nodejs 的朋友应该知道有个非常好和强大的工具模块 http-server 这是一枚小火箭能帮助你直冲云霄，使用方式如下：

首先需要安装 nodejs （对于nodejs 合格的前端应该都安装上了吧？这里就不复述了）。

安装全局模块

 npm install http-server -g

http-server -P http://www.your-backend.com/api

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
};

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {'^/api' : ''}
      }
    }
  }
};

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        secure: false
      }
    }
  }
};

proxy: {
  "/api": {
    target: "http://localhost:3000",
    bypass: function(req, res, proxyOptions) {
      if (req.headers.accept.indexOf("html") !== -1) {
        console.log("Skipping proxy for browser request.");
        return "/index.html";
      }
    }
  }
}

proxy: [{
  context: ["/auth", "/api"],
  target: "http://localhost:3000",
}]

总之 webpack 提供了多种灵活的方式, 相信大多时候都能满足到你到要求。

此方式最合适项目已经使 webpack 工程项目，随项目启动自动开启

var http = require('http'),
    httpProxy = require('http-proxy');
 
var proxy = httpProxy.createProxyServer({});

 
proxy.on('proxyReq', function(proxyReq, req, res, options) {
  proxyReq.setHeader('X-Special-Proxy-Header', 'foobar');
});

var server = http.createServer(function(req, res) {
  // You can define here your custom logic to handle the request
  // and then proxy the request.
  proxy.web(req, res, {
    target: 'http://127.0.0.1:5060'
  });
});

console.log("listening on port 5050")
server.listen(5050);

招式四、使用框架自带代理方式如 angular 的 proxy.

angular 的 proxy 写法形式和 webpack 基本一样, 你需要一份如下的配置文件 proxy.conf.json 我的开源项目 typerx采用的就是这种方式

{
    "/api": {
        "target": "http://localhost:5400/",
        "secure": false
    },
    "/user": {
        "target": "http://localhost:5400/",
        "secure": false
    },
    "/uploads": {
        "target": "http://localhost:5400/",
        "secure": false
    }
}

 ng serve --proxy-config proxy.conf.json

其他更多方式 , 如果你看完更多方式是不是觉得和 webpack 是一样的呢，实际上他就是 webpack 哈？

此方式是工程化后的正确使用姿势

招式五、实际上这个不是代理，但是也能解决你的跨域问题。

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/your/path/