Problems encountered when a program on the line separating the front and rear ends, the front end of the frame VUE used, the background is springboot frame. On-line background is deployed on Tomcat is done by the students.
Vue project
to build a vue-cli framework of the project, which uses vue-router routing jump, but because the address is not created out of vue-router virtual path to real, so after the jump address can not be found, you need to in a separate nginx configuration file to configure routing part alone.
nginx configuration file
server {
listen 8081;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://localhost:8080/;
proxy_redirect off;
proxy_set_header Host $host;
proxy_hide_header Server;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_connect_timeout 10;
proxy_send_timeout 10;
proxy_read_timeout 10;
proxy_intercept_errors on;
proxy_buffering off;
}
location /api/ {
proxy_pass http://XXXX:8081/api/;
proxy_redirect off;
proxy_set_header Host $host;
proxy_hide_header Server;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_connect_timeout 10;
proxy_send_timeout 10;
proxy_read_timeout 10;
proxy_intercept_errors on;
proxy_buffering off;
}
location /a/ {
proxy_pass http://XXXX:8081/a/;
proxy_redirect off;
proxy_set_header Host $host;
proxy_hide_header Server;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_connect_timeout 10;
proxy_send_timeout 10;
proxy_read_timeout 10;
proxy_intercept_errors on;
proxy_buffering off;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
# location /js/ {
# root html;
# fastcgi_pass 127.0.0.1:7004;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
Advanced: localhost: 8080 is vue service. So after intercepting a request with a api interception to http: // XXXX: 8081 / api / this address to go.
Some people would say vue own internal or request directly to the back-end interface. In fact, this is one step can make do with two steps are the same. Personally, I tend to do anti nginx proxy. Hide the real IP. If vpc can do within the network forward , as well as to the nginx can do a lot of gateway security such processing as well as load balancing and the like. SMEs are able to meet the project.