About Http-proxy
Use NPM to build a front-end project you should be familiar with Http-proxy This module, it can forward all the request agent to the real back-end real API address, so that we can really realize the end-to-end development completely separate, and even some resources can be agent to the corresponding resources.
It's easier to understand if you've ever used a VPN child's shoe. Sometimes you have to look inward to see the content you have to send the request to the outside of a forwarder, and then the forwarder to request the real server server address, the server returned to the forwarding server, the forwarding server back to the client.
The use of Http-proxy is very simple, https://www.npmjs.com/package/http-proxy detailed usage look here
Cause because of a small problem
Because encountered a small problem, toss the end of a half-day to find Http-proxy play all is a fool-type forwarding, and later found that the design is also very good.
My development environment for the local static development localhost:3000,server: assumed to be www.111cn.net
Then my setup is as follows:
Httpproxy.createproxyserver ({
Target: ' Http://www.111cn.net '
});
function Proxymiddleware (req, res, next) {
if (/\/api\/.*$/.test (Req.url)) {
Proxy.web (req, res);
} else {
Next ();
}
}
All the APIs are requested to go proxy, but the wrong return, are 404, server tail webserver Access.log incredibly did not capture, which makes me feel very strange. There is no problem accessing the real Server API in the REST API debugging tools.
Find out where the problem lies
Finally I listened to all HTTP requests from the server and found a problem.
Request to come over the host for localhost, found the problem. But strangely, why is the host all localhost?
I think it might have something to do with my local development localhost:3000, so I changed it.
System Host File add
127.0.0.1 www.111cn.net
Modify Http-proxy Configuration
Httpproxy.createproxyserver ({
Target: ' http://192.168.1.85 '/server IP
});
Then open the browser, using the www.111cn.net:3000 domain name to access the local front-end projects, testing the API agent, successful, this back to the server caught on the head host are www.111cn.net.
Solve the problem
Found the problem, but always feel this is not very friendly, so I put the system host file
127.0.0.1 www.111cn.net
Delete, restore Www.111cn.net's true access, and then change it in Http-proxy:
Httpproxy.createproxyserver ({
target: ' http://192.168.1.85 ' /server IP
});
function Proxymiddleware (req, res, next) {
if (/\/api\/.*$/.test (Req.url)) {
Proxy.headers.host = ' www.111cn.net '; //Here Modify the proxy request server's host name
proxy.web (req, res);
} else {
next ();
}
}
and finally reboot the local front-end project, loalhost:3000/api/xxxx requesting server resources. After proxy to server, all host is not localhost but www.111cn.net in Http-proxy configuration.
Of course, some children's shoes are not configured on the server virtual host, ip/domain name access is the same program, there will be no above problems