Demand background

When the front and back ends are deployed separately, a separate service needs to be started for the front end, and if gulp-Connect is used, the proxy needs to be configured with additional plug-ins. First of all, to explain why a proxy is needed, gulp-Connect is a server for the static Web (that is, it can only access static pages). If you need to request data from one or more servers, you need a proxy. Unless the front and back ends are deployed together, there is no way to request data across domains due to browser limitations. Even when the front and back ends are deployed together, proxies are needed if there are requests for data from other services, or if there are other services (retrieval, caching, and so on) that are typically deployed independently.

1 gulp-connect-proxy

Gulp – connect – use simple proxy, such as www.jianshu.com/p/9a63b22ed. There is also less information on the Internet.

var Proxy = require('gulp-connect-proxy');
var connect = require('gulp-connect');

gulp.task("serverName", function () {
    connect.server({
        root: "api",
        port: 8000,
        livereload: true,
        middleware: function (connect, opt) {
            opt.route = '/proxy';
            var proxy = new Proxy(opt);
            return[proxy]; }}); });Copy the code

If you want to visit is localhost: 8080 / pages, so now you need to use localhost: 8000 / proxy/localhost: 8080 / pages, Add the IP address of the proxy server +Port and the prefix set with opt.route to the resource to be accessed. For example, front-end Ajax code might be written like this

return $http.get(

  'http://localhost:8000/proxy/external.host.com:8080/pages', 

  { params: { queryText: "music"}});Copy the code

External.host.com is the domain name /IP address of an external service. The problem is that writing both the external service address and the local service address in code is difficult to maintain.

2 HTTP-proxy-Middleware (Recommended)

Http-proxy-middleware is another gulp proxy plugin that can be used in more detail. Here’s a simple example I use

var connect = require('gulp-connect');
var proxy = require('http-proxy-middleware');

gulp.task('serverName', function() {
    connect.server({
        root: ['path'],
        port: 8000,
        livereload: true,
        middleware: function(connect, opt) {
            return [
                proxy('/api',  {
                    target: 'http://localhost:8080',
                    changeOrigin:true
                }),
                proxy('/otherServer', {
                    target: 'http://IP:Port',
                    changeOrigin:true]}}})); });Copy the code

In this example, the/API requests that the configuration will access are forwarded to http://localhost:8080, while the /otherServer request is forwarded to http://IP:Port. Additional services can be added here if needed. Be sure to set a path parameter like ‘/ API ‘or ‘/otherServer’. If set to ‘/’ all requests will be forwarded to the target specified here. The request in your code doesn’t care where the request is forwarded, just make the request as needed, and the proxy will choose the right service to forward the request. So it’s easy to maintain.

Http-proxy-middleware setup error proxy is not a function

Proxy is not a function

Reference mode of version 0. X.x:

const proxy = require('http-proxy-middleware');

Copy the code

1.0.0 version of the reference

const { createProxyMiddleware } = require('http-proxy-middleware');
Copy the code