nginx配置一、二级域名、多域名对应(api接口、前端网站、后台管理网站)

本文详细介绍了如何配置Nginx以实现多个域名的反向代理,并解决了跨域问题。通过具体的配置实例,读者可以了解如何将不同的HTTP请求路由到后端服务。

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

前提:安装好nginx,如果已经启动nginx,先停止,命令:

./usr/local/nginx/sbin/nginx -s stop

修改nginx配置

vi /usr/local/nginx/conf/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 {
    client_max_body_size 100M;
    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;

    upstream  tomcat8080_api {  
        server 127.0.0.1:8080  weight=1;
    }
    server {
        listen       80;
        server_name  后台接口域名;
        location / {
            proxy_pass http://tomcat8080_api;  
            proxy_redirect default;      
            #设置主机头和客户端真实地址,以便服务器获取客户端真实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;            
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    
    upstream  tomcat8081_admin {  
        server 127.0.0.1:8081  weight=1;  
    }
    server {
        listen       80;
        server_name  管理员后台域名;
        location / {
            proxy_pass http://tomcat8081_admin;  
            proxy_redirect default;

        }
        #解决跨域
        location /apis  {                                # 自定义nginx接口前缀
            rewrite  ^/apis/(.*)$ /$1 break;            # 监听所有/apis前缀,是则转发后台api接口地址
            include  uwsgi_params;
            proxy_pass   http://127.0.0.1:8080;            # 后台api接口地址
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    server {
        listen       80;
        server_name  管理员后台域名2;
        location / {
            proxy_pass http://tomcat8081_admin;  
            proxy_redirect default;
        }
        #解决跨域
        location /apis  {                                # 自定义nginx接口前缀
            rewrite  ^/apis/(.*)$ /$1 break;            # 监听所有/apis前缀,是则转发后台api接口地址
            include  uwsgi_params;
            proxy_pass   http://127.0.0.1:8080;            # 后台api接口地址
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    server {
        listen       80;
        server_name  管理员后台域名3;
        location / {
            proxy_pass http://tomcat8081_admin;  
            proxy_redirect default;
        }
        #解决跨域
        location /apis  {                                # 自定义nginx接口前缀
            rewrite  ^/apis/(.*)$ /$1 break;            # 监听所有/apis前缀,是则转发后台api接口地址
            include  uwsgi_params;
            proxy_pass   http://127.0.0.1:8080;            # 后台api接口地址
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    
    upstream  tomcat8082_shanghu {  
        server 127.0.0.1:8082  weight=1;
    }
    server {
        listen       80;
        server_name  商家后台域名;
        location / {
            proxy_pass http://tomcat8082_shanghu;
            proxy_redirect default;
        }
        #解决跨域
        location /apis  {                                # 自定义nginx接口前缀
            rewrite  ^/apis/(.*)$ /$1 break;            # 监听所有/apis前缀,是则转发后台api接口地址
            include  uwsgi_params;
            proxy_pass   http://127.0.0.1:8080;            # 后台api接口地址
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

复制代码

 

 

启动nginx命令:

./usr/local/nginx/sbin/nginx

重启nginx命令:

./usr/local/nginx/sbin/nginx -s reload
<think>我们正在处理后台管理系统频繁出现404错误的问题。404错误通常表示客户端能够与服务器通信,但服务器无法找到所请求的资源。我们需要系统地排查可能的原因并给出解决方案。 可能的原因和排查步骤: 1. **URL或路径错误**:检查请求的URL是否正确,包括大小写、路径参数、查询参数等。特别是在部署或更新后,路径可能发生改变。 - 解决方案:确保前端请求的URL与后端路由定义完全匹配。使用绝对路径或配置文件管理URL可减少错误。 2. **路由配置问题**:在后台管理系统中,前端路由(如使用Vue Router、React Router)和后端路由(如Spring MVC、Express)都需要正确配置。 - 前端路由:如果使用单页面应用(SPA),确保正确配置了History模式或Hash模式。在History模式下,需要后端配合支持,否则刷新页面可能导致404。 - 解决方案:对于前端路由,在服务器端配置个回退路由,将404错误重定向到index.html(对于SPA)。例如,在Nginx中: ```nginx location / { try_files $uri $uri/ /index.html; } ``` - 后端路由:检查控制器(Controller)的路由注解或配置,确保路径正确。例如,在Spring Boot中,检查`@RequestMapping`或`@GetMapping`等注解。 3. **资源未部署或丢失**:静态资源(如JS、CSS、图片)或API接口路径可能不存在。 - 解决方案:检查构建后的静态资源是否已经部署到服务器正确的目录下。同时,确保后端服务已正确启动,并且API路径可访问。 4. **权限问题**:某些资源可能需要登录或特定权限才能访问,而用户未登录或权限不足,但服务器返回404而不是403(为了安全隐藏资源存在性)。 - 解决方案:检查权限控制逻辑,确保返回正确的状态码(如401未认证,403无权限)。对于需要隐藏的资源,返回404是合理的,但需要在前端正确处理。 5. **代理或负载均衡配置问题**:如果使用了反向代理(如Nginx)或负载均衡器,可能由于配置错误导致请求被转发到错误的路径或服务。 - 解决方案:检查代理配置,确保路径重写(rewrite)规则正确。例如,在Nginx中代理API请求时: ```nginx location /api/ { proxy_pass http://backend-service/; # 注意末尾的斜线,它会将/api/xxx转发到backend-service的/xxx } ``` 6. **缓存问题**:浏览器或CDN缓存了旧的资源路径,导致新版本更新后请求旧路径。 - 解决方案:清除缓存,并在资源URL中添加版本号或哈希值(如`app.js?v=1.0.1`或`app.[hash].js`)。 7. **代码中的硬编码路径错误**:在代码中可能硬编码了错误的路径。 - 解决方案:使用环境变量或配置文件来管理基础路径,避免硬编码。 8. **服务器文件系统权限问题**:服务器上的文件或目录权限不足,导致Web服务器无法读取。 - 解决方案:检查服务器上相关资源的权限,确保Web服务器进程有读取权限。 9. **第三方服务或CDN问题**:如果静态资源托管在第三方CDN上,可能是CDN配置问题或文件未上传。 - 解决方案:检查CDN配置,确保文件已正确上传,并且CDN的缓存规则正确。 10. **API版本变更**:后端API版本更新,路径发生变化,而前端没有同步更新。 - 解决方案:前后端约定API版本管理,使用版本号(如`/api/v1/xxx`)来避免冲突。 11. **服务器未启动或端口错误**:后端服务未启动,或者监听的端口错误,导致请求无法到达。 - 解决方案:检查后端服务是否正常运行,并监听正确的端口。 12. **DNS解析问题**:域名解析错误,导致请求发送到错误的服务器。 - 解决方案:检查DNS设置,使用`ping`或`nslookup`验证域名解析。 13. **跨域问题(CORS)**:如果前端和后端分离部署,可能会因为跨域问题导致请求失败(但通常跨域问题会返回403或CORS错误,而不是404)。不过,有时配置错误也可能导致404。 - 解决方案:确保后端配置了正确的CORS策略。 14. **HTTPS/HTTP混合内容问题**:如果网站使用HTTPS,但请求的资源使用HTTP,浏览器可能会阻止加载,导致资源不可用(但通常不会返回404)。 - 解决方案:确保所有资源使用HTTPS。 15. **日志分析**:查看服务器错误日志(如Nginx的error.log,Tomcat的catalina.out等),通常会有更详细的错误信息。 16. **前端框架特定问题**:例如,在Vue或React中,如果使用路由懒加载,可能会在动态加载组件时出现404。 - 解决方案:检查懒加载的路径配置,确保构建后路径正确。 由于404错误涉及面广,需要从客户端到服务器端逐层排查。建议按照以下步骤进行: 1. **确认错误发生的具体场景**:是访问静态资源(如图片、JS文件)还是API接口?是首次访问还是操作过程中出现?是否在特定页面出现? 2. **检查浏览器开发者工具**:查看Network面板,确认404请求的URL,检查请求方法和响应头。 3. **检查服务器日志**:根据请求时间,查找对应的服务器日志,看是否有相关错误记录。 4. **模拟请求**:使用Postman或curl模拟请求,排除浏览器问题。 5. **逐步缩小范围**:通过对比正常环境和异常环境,定位问题。 通过以上步骤,通常可以定位并解决404错误。 §§相关问题§§ 1. 如何配置Nginx以避免前端路由刷新后出现404错误? 2. 在Spring Boot应用中,如何排查并解决404错误? 3. 如何通过浏览器开发者工具诊断网络请求错误?</think>### 后台管理系统404错误排查与解决指南 404错误表示"资源未找到",在后台管理系统中频繁出现通常由以下原因导致。请按顺序排查: --- #### 、常见原因及解决方案 1. **URL路径错误** - 检查前端请求的API路径是否与后端路由配置致 - 验证环境变量(开发/生产)中的基础路径配置 - 示例代码检查(Vue.js): ```javascript // 错误示例:硬编码路径 axios.get('http://localhost:8080/api/users') // 正确示例:使用环境变量 axios.get(`${process.env.API_BASE_URL}/users`) ``` 2. **路由配置问题** - 前端路由:确保SPA路由模式匹配(history/hash) ```nginx # Nginx配置示例(解决history模式404) location / { try_files $uri $uri/ /index.html; } ``` - 后端路由:检查控制器注解(如Spring Boot) ```java @RestController @RequestMapping("/api/admin") // 检查路径是否匹配前端请求 public class AdminController {...} ``` 3. **资源未部署/权限不足** - 静态文件:确认JS/CSS/图片已正确部署到服务器 - API权限:检查接口是否需要认证(如JWT令牌缺失) - 文件权限:Linux系统使用 `ls -l` 验证资源读权限 4. **代理配置错误** 反向代理配置示例(Nginx): ```nginx location /api/ { proxy_pass http://backend-service/; # 注意结尾斜线 proxy_set_header Host $host; } ``` - 检查代理路径是否包含多余字符(如双斜杠 `//`) 5. **缓存问题** - 浏览器:`Ctrl+F5` 强制刷新清除缓存 - CDN:刷新CDN缓存或添加版本号 `style.css?v=1.2.3` - 服务端:检查Cache-Control头部配置 --- #### 二、高级排查步骤 1. **网络请求分析** - 浏览器开发者工具(Network面板): - 检查404请求的**完整URL**和**响应头** - 确认请求是否被重定向(状态码301/302) - 使用curl模拟请求: ```bash curl -v http://your-api-url.com/resource ``` 2. **日志追踪** - 后端日志:搜索404相关记录(如Spring Boot的`logging.level.org.springframework.web=DEBUG`) - Web服务器日志(Nginx/Apache): ```bash grep " 404 " /var/log/nginx/access.log ``` 3. **版本不致** - 检查前后端版本是否匹配(特别是API路径变更后) - 使用API文档工具(如Swagger)验证当前接口定义 4. **文件系统大小写敏感** - Linux系统区分大小写: `GET /UserList` ≠ `GET /userlist` --- #### 三、预防措施 - **自动化测试**:添加路由测试用例(如Jest + Supertest) - **配置中心**:使用Consul/Nacos统管理路径配置 - **监控报警**:配置404错误率监控(Prometheus + Grafana) - **标准化路由**:采用RESTful风格,避免特殊字符路径 > 案例:某系统因Nginx的`proxy_pass`缺少结尾斜杠,导致请求路径从 `/api/users` 错误代理到 `http://backend-serviceusers`,添加斜杠后解决[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值