nginx-springboot-vue前后端分離跨域配置
引言
接着上篇——簡單的springboot-vue前后端分離登錄Session攔截的demo，其中跨域是通過springboot后端全局設置的，但是碰到了奇怪的問題，用了個不優雅的方式解決。
於是想到使用Nginx跨域應該就不會如此了。
windows下載安裝
http://nginx.org/ 下載穩定版，解壓縮。
查看配置文件 /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;
默認監聽端口是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端口先跑起來。
- 進入安裝目錄dos輸入
start nginx，一閃而過正常，不要使用雙擊exe方式 - 查看驗證 nginx 80 端口情況
tasklist|findstr nginx - 確定無誤，瀏覽器鍵入
localhost:80顯示 Nginx 歡迎頁，OK
打包部署 vue-cli 項目
修改默認80端口為自定義端口8081
- /conf/nginx.conf 的 server.listen 80 >> 8081
- 重載配置重啟：
nginx.exe -s reload
nginx常用命令（windows-dos環境加.exe后綴，比如 nginx.exe -t）
（cd 到安裝跟目錄執行命令，比如 xxx/nginx-1.16.0/）
start nginx 啟動
nginx -v 查看Nginx的版本號
nginx -t 檢查配置文件的有效性
nginx -s 立即關閉
nginx -s quit 處理完當前的請求后關閉
nginx -s reload 修改完配置文件后重載
nginx -s reopen 打開日志文件
打包部署vue-cli項目
- 進入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一勞永逸，前端無關性）
- 直接使用vue的跨域設置（
- 如果后端是也自己開發的話，直接后端（如
springboot）配置跨域是很方便的 - 開發時使用vue的跨域設置，上線時則使用Nginx的配置（一般會用到集群配置），這樣的搭配也很nice
碰到的問題
- Windows-dos下使用
nginx -s stop; nginx -s reload等喜聞樂見命令時，報找不到命令。
上面通用的是Linux環境的，windows-dos下使用這種
nginx.exe -s stop。
可以繼續折騰的主題（鏈接坑待填）
- Nginx配置文件服務器（上傳下載）
- Nginx集群(負載均衡)配置與Session問題