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

碰到的问题

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

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

可以继续折腾的主题(链接坑待填)

  • Nginx配置文件服务器(上传下载)
  • Nginx集群(负载均衡)配置与Session问题
posted @ 2019-06-28 00:07  richard.he  阅读(3660)  评论(0编辑  收藏  举报