devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Nginx反向代理+Tomcat服务+Vue跨域_nginx配置代理转发 tomcat下的vue

作者：不正经 | 2024-03-04 03:38:46

赞

踩

nginx配置代理转发 tomcat下的vue

Nginx+Tocat


在这里插入图片描述

准备资源

点击下载nginx+tomcat资源包，并在当前windows系统的host文件中进行配置

127.0.0.1 www.vitamin.com
182.92.187.217 blog.csdn.net

  • 1
  • 2

配置tomcat执行环境，并修改资源包nginx中conf/nginx.conf的自己的server_name
高级系统设置-环境变量- 系统变量

新建 TOMCAT_HOME = D:\apache-tomcat-8.5.69(我的目录)
新建 CATALINA_HOME = D:\apache-tomcat-8.5.69(我的目录)
新增 Path = ;%TOMCAT_HOME%\bin;%CATALINA_HOME%\lib

启动服务

启动tomcat

环境配置后，在windows的doc窗口通过tomcat启动指令startup。启动成功【关闭进程服务可在任务管理器中操作】

#启动tomcat
C:\Users\Administrator>startup

  • 1
  • 2

在这里插入图片描述
在这里插入图片描述

验证，chrom地址栏输入www.vitamin.com/kotlin/，查看到服务启动成功后的网页~
在这里插入图片描述
然后通过nginx指令start nginx启动，启动成功【关闭进程服务可在任务管理器中操作】

#启动nginx
C:\Users\Administrator>start nginx

  • 1
  • 2
#终止nginx
C:\Users\Administrator>nginx -s stop

  • 1
  • 2

在这里插入图片描述
测试Nginx配置的反向代理是否正常，输入server_name+端口号+匹配字符串验证。

#访问地址
http://192.168.1.106:8091/kotlin/index.html

  • 1
  • 2

在这里插入图片描述

代码验证ok，下面为Nginx下nginx.conf文件中的代码配置

#nginx.conf 配置
#user  nobody;
worker_processes  1;

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

    server {
        listen       8091;
        server_name  192.168.1.105;#当前台式机ip

        charset utf-8;

        #access_log  logs/host.access.log  main;

        #入口文件的设置
        location ^~ /nginx-1.12.2/html/index.html {          
            root   C:/Users/Administrator/Desktop; #入口文件的所在目录
            index  index.html index.htm; #默认入口文件名称
        }

        location ^~ / {          
            root   html; #入口文件的所在目录
            index  index.html index.htm; #默认入口文件名称
        }
        location /index.html {          
            root   html; #入口文件的所在目录
            index  index.html index.htm; #默认入口文件名称
        }
        location = /segment/ {          
            root   html; #入口文件的所在目录
            index  index.html index.htm; #默认入口文件名称
        }


        location = /websocket/ {
            proxy_pass http://www.vitamin.com:8090;
        }
        location = /en/download.html {
            proxy_pass http://nginx.org;
        }
        location = /yao_hou {
            proxy_pass https://blog.csdn.net;
        }
        location = /kotlin/index.html {
            proxy_pass http://www.vitamin.com:8090;
        }
... ... ...
	... ... ...
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78

梳理

在实际操作过程，遇到一下产生困惑与混乱的几点。这里予以分享：
1，匹配原则
2，访问Nginx服务下的本地资源 {location 匹配字段不能随意写，为什么？}
3，通过Nginx反向代理访问Tomcat下的本地资源 {location 匹配字段不能随意写，为什么？}

匹配原则

~ 波浪线表示执行一个正则匹配，区分大小写;
~* 表示执行一个正则匹配，不区分大小写;
^~ 表示普通字符匹配，如果该选项匹配，只匹配该选项，不匹配别的选项，一般用来匹配目录。
= 进行普通字符精确匹配;
@ 定义一个命名的 location，使用在内部定向时，例如 error_page, try_files

location  = / {
  # 只匹配"/".
}
location  / {
  # 匹配任何请求，因为所有请求都是以"/"开始
  # 但是更长字符匹配或者正则表达式匹配会优先匹配，比如后边的[location ~* .(gif|jpg|jpeg)$]
}
location ^~ /images/ {
  # 匹配任何以 /images/ 开始的请求，并停止匹配。即使后面有http://ip/images/id这样的，前面匹配到就停止不会继续向后观望。
}
location ~* .(gif|jpg|jpeg)$ {
  # 匹配以 gif, jpg, or jpeg结尾的请求. 
  # 但是所有 /images/ 目录的请求将由[location ^~ /images/]抢先执行
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

访问Nginx服务下的本地资源

经过实践操作，通过启动本地Nginx使用反向代理来解决vue访问后台接口跨域问题是可以的。1，vue中配置的baseurl=本机ip或localhost+端口；2，Nginx的代理proxy_pass=后台接口的ip+端口。

经过实践操作，Nginx服务下目录静态资源若在服务已启动的清况下，进行资源更换。通过刷新可以依然实时访问更新或已修改的资源。

经过实践操作，nginx.conf文件内server_name若不是本机ip域名，那么就需要到host文件中进行登记。比如我用到的182.92.187.217 blog.csdn.net。否则无法执行就访问。

local匹配访问原理

通过location匹配到且访问root下的资源。那么执行过程是这样的
以41行代码为例，chrome输入http://192.168.1.105:8091/nginx-1.12.2/html/index.html然后实际执行就会访问C:/Users/Administrator/Desktop/nginx-1.12.2/html/index.html。具体如下图
location匹配字段不能随意书写，因为在访问本地资源时，访问的地址部分字段是由location的匹配字段所提供的。

在这里插入图片描述

通过Nginx反向代理访问Tomcat下的本地资源

访问Tomcat下的资源与Nginx比较相似。只是访问Tomcat时需要用到反向代理。以72行代码为例，chrome输入http://192.168.1.105:8091/kotlin/index.html然后实际执行就会访问http://www.vitamin.com:8090/kotlin/index.html。location匹配字段不能随意书写，因为在执行反向代理访问Tomcat服务资源时，访问的地址部分字段是由location的匹配字段所提供的。
在这里插入图片描述

Nginx启动下无法正确加载样式(.css)

举例说明在这三种清况下，在Nginx服务下访问静态资源。寻找无法正确加载样式，导致页面布局杂乱的解决方案。
在这里插入图片描述

Nginx.conf脚本代码的初始配置


#user  nobody;
worker_processes  1;

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  text/plain;

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       8091;
        server_name  192.168.1.106;#当前台式机ip
        charset utf-8;
        
        #入口1文件的设置
        location ~ /acsweb/ {          
            root   html; #入口文件的所在目录
            index  index.html index.htm; #默认入口文件名称
        }
        
        #入口2文件的设置
		location ~ /webserver/ {          
            root   html; #入口文件的所在目录
            index  index.html index.htm; #默认入口文件名称
        }
        
        #入口3文件的设置
        location ~ /loc/ {          
            root   html; #入口文件的所在目录
            index  index.html index.htm; #默认入口文件名称
        }
    }
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48

样式加载不正确

通过执行上面shell初始脚本代码Nginx.conf，然后分别输入静态资源地址进行访问。三种目录下的访问结果一致，丑陋极了
在这里插入图片描述
而在vscode执行npm run build打包生成的静态资源中执行index.html效果，很舒服。
在这里插入图片描述
可以看出明显区别，就是我们在vue应用中写的样式 —— 丢了~
为什么呢？ 查找问题原因~
首先找到本地静态资源样式文件

app.0d9c40d5.css
example.b13f845c.css

  • 1
  • 2

然后通过Chrome查看对应css文件的响应状态，及在Network/Headers/Response Headers下的 Content-Type，会发现获取css资源ok的。但是Response Headers的Content-Type对应value值为:text/plain，显然是不对的。
在这里插入图片描述在这里插入图片描述

说明即使我们在请求css样式时，请求到了样式内容（如上图）。但是响应给我们的报文内容并不是我们能够使用的内容格式。因此vue应用在被访问时，并不能正确加载使用样式。

Nginx如果不指定mime type，则默认会以text/plain的形式处理。因此浏览器以纯文本的形式来处理css和js文件，无法正常加载样式。

Nginx.conf脚本代码（如下）的初始配置的18、19行脚本（已被注释掉）正验证了上面的结论！

http {
    #include       mime.types;
    #default_type  text/plain;

  • 1
  • 2
  • 3

解决方案

Nginx如果不指定mime type，则默认会以text/plain的形式处理。因此浏览器以纯文本的形式来处理css和js文件，无法正常加载样式。 _ 对应解决方案必定是要从mime type上下手。

血的经验教训——建议，修改了Nginx的mime type后，如果执行后发现并不起作用。你需要执行chrome/设置/隐私设置和安全性/清除浏览数据清理一下。

在该Nginx.conf的mime type配置中有时候配置

include       mime.types;
default_type  application/octet-stream;

  • 1
  • 2

仍然无法正确加载样式，尝试使用下面脚本才合适

include       mime.types;
default_type  text/css;

  • 1
  • 2

[具体的合适mime type配置，可能需要多次尝试]

修改之后的Nginx.conf文件脚本配置(local 中可以单独指定[灵活]，也可以全局配置[方便])


#user  nobody;
worker_processes  1;

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;

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       8091;
        server_name  192.168.1.106;#当前台式机ip
        #charset utf-8;
        
        #入口文件的设置
        location ~ /webserver/ {   
            default_type  text/css;       
            root   html; #入口文件的所在目录
            index  index.html index.htm; #默认入口文件名称
        }

        location ~ /acsweb/ {
            default_type  text/css;           
            root   html; #入口文件的所在目录
            index  index.html index.htm; #默认入口文件名称
        }
        location ~ /loc/ {  
            default_type  text/css;         
            root   html; #入口文件的所在目录
            index  index.html index.htm; #默认入口文件名称
        }
        
    }
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49

解决Vue跨域问题

Vue框架实现web应用，在与后端进行调试会发现跨域！！
而Nginx却能很好的解决调试期间的跨域问题 ~ ~

前端执行接口请求，会被Nginx正在监听的 server_name 和 listen 捕获！之后通过代理转发，实质会通过proxy_pass进行请求 ~ 从而解决跨域问题！！

# Vue的代码
# axios.default.baseUrl = 前端ip+后态端口
# 比如下面代码：
import axios from 'axios'
axios.defaults.baseURL = http://84.231.10.60:9080

  • 1
  • 2
  • 3
  • 4
  • 5
# Nginx的脚本
... ... ...
     .....
     server {
        listen       9080;# 后台端口
        server_name  84.231.10.60;#前端ip
        ... .... .....
        location = /后台接口url中部分/ {
            proxy_pass http://84.127.60.18:9080; # 84.127.60.18后台ip 、9080后台端口
        }       
    }
     .......
 .......

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

参考文章
https://www.hangge.com/blog
https://www.cnblogs.com/

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号