demo之springboot-vue-nginx先後端分離跨域配置

時間 2019-11-24

標籤 demo springboot vue nginx 後端分離配置欄目 Spring 简体版

原文原文鏈接

nginx-springboot-vue先後端分離跨域配置

引言

接着上篇——簡單的springboot-vue先後端分離登陸Session攔截的demo，其中跨域是經過springboot後端全局設置的，可是碰到了奇怪的問題，用了個不優雅的方式解決。
因而想到使用Nginx跨域應該就不會如此了。php

windows下載安裝

http://nginx.org/ 下載穩定版，解壓縮。
查看配置文件 /nginx-1.16.0/conf/nginx.conf :html

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

默認監聽端口是80，/是相對路徑下的html目錄。前端

windows下查看一個端口占用狀況netstat -ano|findstr 3306
輸出：
TCP 0.0.0.0:3306 0.0.0.0:0 LISTENING 3448
TCP [::]:3306 [::]:0 LISTENING 3448
查看佔用此端口的是哪一個進程tasklist|findstr 3448
輸出：
mysqld.exe 3448 Services 0 163,952 K
根據PID殺掉進程（強行）taskkill /pid #{pid} /F
（固然能夠打開任務管理器直接幹掉）
根據關鍵字查詢目標進程tasklist|findstr mysql

肯定端口沒被佔用後，默認的80端口先跑起來。vue

進入安裝目錄dos輸入 start nginx，一閃而過正常，==不要使用雙擊exe方式==
查看驗證 nginx 80 端口狀況 tasklist|findstr nginx
肯定無誤，瀏覽器鍵入 localhost:80 顯示 Nginx 歡迎頁，OK

打包部署 vue-cli 項目

修改默認80端口爲自定義端口8081mysql

/conf/nginx.conf 的 server.listen 80 >> 8081
重載配置重啓：nginx.exe -s reload

nginx經常使用命令（==windows-dos環境加.exe後綴，好比 nginx.exe -t==）
（cd 到安裝跟目錄執行命令，好比 xxx/nginx-1.16.0/）ios

start nginx 啓動
nginx -v 查看Nginx的版本號
nginx -t 檢查配置文件的有效性
nginx -s 當即關閉
nginx -s quit   處理完當前的請求後關閉
nginx -s reload 修改完配置文件後重載
nginx -s reopen 打開日誌文件

打包部署vue-cli項目nginx

進入vue項目根目錄執行 cnpm run build
將生成的 dist 目錄放置 nginx 根目錄下的 html 目錄下（/nginx-1.16.0/html/dist）
修改nginx配置文件中的location

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

驗證配置nginx.exe -t，重載配置nginx.exe -s reload
刷新8081頁面

Nginx跨域配置

未使用Nginx以前，Java後端跨域
springboot後端配置全局跨域，容許這個8081的請求跨域，這樣優勢是任何接口調用方的前端代碼和nginx配置不用變化，但前提是後端是我本身開發的 XD..
開始嘗試Nginx的跨域配置
注掉springboot的全局跨域配置，取消vue中axios.defaults.baseURL，baseURL的做用也交給Nginx的proxy_pass。
完整配置demo第一版（已測）

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

心得

3種解決跨域的方式
- 直接使用vue的跨域設置（proxyTable，開發環境本地調試用）
- 使用Nginx代理配置（即本文 proxy_pass，開發到上線）
- springboot後端配置跨域（addCorsMappings 一勞永逸，前端無關性）
若是後端是也本身開發的話，直接後端（如 springboot）配置跨域是很方便的
開發時使用vue的跨域設置，上線時則使用Nginx的配置（通常會用到集羣配置），這樣的搭配也很nice