若依前后端分离版部署出现 404 以及接口访问 404 问题

使用若依前后端分离版本开发一个新项目，在部署的时候出现 404 报错:

项目的 nginx 配置是从之前一个项目复制过来的，也是前后端分离，然后通过 nginx 做的反向代理。

server {
    listen              90;
    server_name         localhost;
    access_log          /xx/nginx/gpsmanage.log main;

    location / {
        root   /xx/nginx/html/web/gpsmanage-h5;
        index  index.html index.htm;
    }

    location /prod-api/ {
        client_body_buffer_size 256k;
        proxy_redirect off;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_connect_timeout 30;
        proxy_send_timeout 30;
        proxy_read_timeout 60;
        proxy_buffer_size 256k;
        proxy_buffers 4 256k;
        proxy_busy_buffers_size 256k;
        proxy_temp_file_write_size 256k;
        proxy_next_upstream error timeout invalid_header http_500 http_503 http_404;

        proxy_pass http://localhost:9000;
    }
}

404 报错太普遍了，也处理过很多次，但都不记得了。

百度了一下，是要在根目录添加 try_fiels 语句，实现伪静态。实际访问的是路径是不包含 .html 后缀的，但 nginx 解析的文件就是 index.html 或 index.htm(文件类型索引：index index.html index.htm;)，所以需要做一下转换。

server {
    listen              90;
    server_name         localhost;
    access_log          /xx/nginx/gpsmanage.log main;

    location / {
        root   /xx/nginx/html/web/gpsmanage-h5;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }

    location /prod-api/ {
        client_body_buffer_size 256k;
        proxy_redirect off;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_connect_timeout 30;
        proxy_send_timeout 30;
        proxy_read_timeout 60;
        proxy_buffer_size 256k;
        proxy_buffers 4 256k;
        proxy_busy_buffers_size 256k;
        proxy_temp_file_write_size 256k;
        proxy_next_upstream error timeout invalid_header http_500 http_503 http_404;

        proxy_pass http://localhost:9000;
    }
}

想起来当初做 php 项目部署的时候也是经常会遇到 404，就是这么处理的。

此时登录页出来的，但又出现新的报错：登录状态已过期，您可以继续留在该页面，或者重新登录:

验证码也没有加载出来，提示 401 认证失败，无法访问系统资源。

点击重新登录请求一直无法完成，查看请求状态也是 401。也就是说，此时所有的后台请求都是 401。

但我查看 ip+port 后面默认地址是有信息的，knife4j 接口文档也访问正常。

找了很久没有确认问题所在，就去找官方文档里的部署部分 - nginx 配置，对照着查看，果然发现了问题。

代理配置中，proxy_pass http://localhost:9000; 后面少了一个斜杠，应该为 proxy_pass http://localhost:9000/;。

简单的问题出错了就是这么让人摸不着头脑。这里应该是代理路径转化的问题，如果没有斜杠 /，那么 http://localhost:90/prod-api/logout 访问的就是 http://localhost:9000logout，压根找不到地址。

添加斜杠 / 之后，重启 nginx 访问成功。

server {
    listen              90;
    server_name         localhost;
    access_log          /xx/nginx/gpsmanage.log main;

    location / {
        root   /xx/nginx/html/web/gpsmanage-h5;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }

    location /prod-api/ {
        client_body_buffer_size 256k;
        proxy_redirect off;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_connect_timeout 30;
        proxy_send_timeout 30;
        proxy_read_timeout 60;
        proxy_buffer_size 256k;
        proxy_buffers 4 256k;
        proxy_busy_buffers_size 256k;
        proxy_temp_file_write_size 256k;
        proxy_next_upstream error timeout invalid_header http_500 http_503 http_404;

        proxy_pass http://localhost:9000/;
    }
}