Before and after the end of the Spring Boot architecture completely separate project-based API path problem

A recent project uses completely separate front and rear ends of the structure, front-end components: vue + vue-router + vuex + element-ui + axios, back-end components: Spring Boot + MyBatis. This is done in order to consider the expansion of the back-end level of convenience, in the deployment of the front and rear end can be completely independent of one another deployment, deployment front-end can be used as such a high-performance Nginx Web server directly.

Front-end back-end server needs to know the IP address to access it access to data, but if so, there will be a problem when deploying an IP address hard-coded in the front-end code: When the server IP address changes must be re-packaged and released (different environments to develop, test, and production lines also need to be packaged for a specific environment).

relative path

If the context path of the rear end of the project is "/" then out of consideration for resource utilization, early in the project (small scale) front and rear ends can be deployed in the same embedded Tomcat container (Spring Boot framework supports static pages) . In this case, the request in Ajax front end projects relative path may be used, as follows:

var url = "/api/v1/data"
$.get(url, function(data){
    alert("Data Loaded: " + data);
});

At this time, in front of Ajax relative path automatically add http: // host: port, and context path is "/", then the path to the final API request is: http://host:port/ + 相对路径. At this time, the front end would not hard-coded code address and port of the rear end, it is noted that this usage provided two conditions must be met:
(1) front and rear ends must be deployed in the same container
(2) must be context path backend "/"

Absolute path

As the project progresses, the front and rear ends to support both horizontal expansion (clusters), then need to consider the deployment of fully independent front and rear ends, then in front of the Ajax request can not be used in a relative path (because the host address is different, there is Cross-domain), access to back-end API can only use an absolute path, but can only access the back-end hard-coded address and port (such as: HTTP: // Host: port / API / xxx ). To deal with this awkward situation, consider ways to use the domain name to access back-end services, so long as the domain name change, the front end of the access address would not change.