demo之springboot-vue-nginx前后端分离跨域配置
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问题
