nginx-springboot-vue cross-domain separated front and rear ends arranged

introduction

Then Part - simple springboot-vue before and after the end of the separation Login Session intercepted Demo , which is cross-domain by springboot back-end global settings, but encountered a strange question, used a not elegant way to solve.
Think of using Nginx cross-domain would not be the case.

download and install windows

http://nginx.org/ download the stable version, unzipped.
View Profile /nginx-1.16.0/conf/nginx.conf:

#gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

The default listening port is 80, /under a relative path htmldirectory.

View occupying a port under windows circumstances netstat -ano|findstr 3306
output:
TCP 0.0.0.0:3306 0.0.0.0:0 LISTENING 3448
TCP [::]: 3306 [::]: 0 LISTENING 3448
View occupy this port which is the process tasklist|findstr 3448
output:
mysqld.exe 3448 K Services 0 163,952
According to PID to kill the process (forced) taskkill /pid #{pid} /F
(Of course you can open the Task Manager to kill the)
According keyword query target processtasklist|findstr mysql

After determining the port is not occupied, the default port 80 Xianpao up.

Dos input into the installation directory start nginx, fleeting normal, do not use double-click the exe way == ==
View 80 verified cases nginx port tasklist|findstr nginx
Determine the correct, browser type localhost:80display Nginx welcome page, OK

Package deployment vue-cli project

Modify the default port 80 is a custom port 8081

/conf/nginx.conf 的 server.listen 80 >> 8081
Reload the configuration and reboot:nginx.exe -s reload

nginx commonly used commands (== windows-dos environment plus .exe suffix, such as -t == nginx.exe)
(cd to the install directory with the command execution, such as xxx / nginx-1.16.0 /)

start nginx 启动
nginx -v 查看Nginx的版本号
nginx -t 检查配置文件的有效性
nginx -s 立即关闭
nginx -s quit   处理完当前的请求后关闭
nginx -s reload 修改完配置文件后重载
nginx -s reopen 打开日志文件

Package deployment vue-cli project

Vue into the root directory of the project execution cnpm run build
Dist directory generated under the html directory is placed under the root directory nginx (/nginx-1.16.0/html/dist)
Modify nginx configuration file location

location / {
            root   html/dist;
            index  index.html index.htm;
        }

Verify the configuration nginx.exe -t, reload configurationnginx.exe -s reload
Refresh page 8081

Nginx cross-domain configuration

Nginx is not used before, Java back-end cross-domain
springboot global cross-domain back-end configuration, allowing cross-domain request 8081, this advantage is nginx front-end code and configure any caller interfaces do not change, but only if the back-end is my own developed XD ..
Nginx began to try cross-domain configuration
Note springboot out global cross-domain configuration, the abolition of vue axios.defaults.baseURL, baseURL role also, to the Nginx proxy_pass.
Fully configured demo first edition (already measured)

#user  nobody;
# 启动多worker进程
#worker_processes  1;
worker_processes  auto;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    # 启用gzip压缩
    gzip  on;
    #gzip  on;

    server {
        # nginx服务器对外8081端口
        listen       8081;
        server_name  localhost;

        #charset koi8-r;

        # 日志输出
        access_log  logs/myvue.access.log  main;
        #access_log  logs/host.access.log  main;

        # 静态文件配置
        location / {
            root   html/dist;
            index  index.html index.htm;
        }

        #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;
        }

        # 反向代理springboot接口服务
        location /api/ {
            # 前端请求: /api/login 代理后: http://127.0.0.1:8080/login
            proxy_pass http://127.0.0.1:8080/;
            # 解决springboot中获取远程ip的问题
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_http_version 1.1;
            proxy_set_header Connection "";
        }
        
        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

Experience

3 ways to solve cross-domain
- Vue direct use cross-domain settings ( proxyTable, local development environment with debugging)
- Use Nginx proxy configuration (i.e. herein proxy_pass, to the development of on-line)
- springboot rear cross-domain configuration ( addCorsMappingsonce, the front end of independence)
If the backend is also to develop their own words, direct back-end (such as springboot) cross-domain configuration is very convenient
Developing an vue cross-domain settings, use Nginx configuration when on-line (usually used in a cluster configuration), this mix is also very nice

Problems encountered

Under Windows-dos using nginx -s stop; nginx -s reloadisochronous loved command, the command can not find the report.

The above is a common Linux environment, the use of such-DOS under Windows nginx.exe -s stop.

You can continue to toss topics (links pit to be filled)

Nginx configuration file server (upload and download)
Nginx cluster (load balancing) configuration problem with the Session