nginx-springboot-vue前后端分离跨域配置

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 一劳永逸，前端无关性）
• 如果后端是也自己开发的话，直接后端（如 springboot）配置跨域是很方便的
• 开发时使用vue的跨域设置，上线时则使用Nginx的配置（一般会用到集群配置），这样的搭配也很nice

碰到的问题

• Windows-dos下使用 nginx -s stop; nginx -s reload 等喜闻乐见命令时，报找不到命令。

上面通用的是Linux环境的，windows-dos下使用这种 nginx.exe -s stop。

可以继续折腾的主题（链接坑待填）

• Nginx配置文件服务器（上传下载）
• Nginx集群(负载均衡)配置与Session问题