Nginx反向代理+Tomcat服务+Vue跨域

最新推荐文章于 2025-02-20 23:31:03 发布

学术袁

最新推荐文章于 2025-02-20 23:31:03 发布

阅读量2.1k

点赞数

分类专栏：后端开发文章标签： nginx vscode 后端 vue tomcat

本文链接：https://blog.youkuaiyun.com/junhuahouse/article/details/119061981

版权

本文介绍了如何配置Nginx与Tomcat环境，通过Nginx反向代理解决Vue应用的跨域问题。详细解析了Nginx配置文件中的location匹配规则，以及遇到的样式加载问题及其解决方案，包括调整mimetype以确保CSS正确加载。同时，讨论了Vue在开发中遇到的跨域调试问题，展示了Nginx如何帮助处理跨域请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

准备资源

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

127.0.0.1 www.vitamin.com
182.92.187.217 blog.youkuaiyun.com

配置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

在这里插入图片描述

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

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

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

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

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

在这里插入图片描述

代码验证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; #入口文件的所在目

最低0.47元/天解锁文章