若依前后端分离部署 Nginx 反向代理，刷新页面失效和登录后 404

你是否也遇到过在使用若依前后端分离项目部署 Nginx 反向代理后，刷新页面失效或者登录后 404 的问题？

别担心，今天就带你一探究竟，找到问题的根源，并给出解决方案！

一、问题分析：

1. 刷新页面失效：

• 常见原因：由于 Nginx 代理后，浏览器无法获取到正确的 Cookie 信息，导致页面无法正常加载。

2. 登录后 404：

• 常见原因： 登录后，前端页面跳转的 URL 路径可能存在错误，导致无法访问到正确资源。

二、解决方案：

1. 解决刷新页面失效问题：

• Nginx 配置：

nginx

location / {
    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_pass http://localhost:8080/;  # 若依项目端口号
    proxy_cookie_path / /;  # 确保 Cookie 路径正确
}

• 在 Nginx 配置中使用 proxy_cookie_path指令，将 Cookie 路径设置为 / `， 确保 Nginx 代理后，浏览器能够获取到正确的 Cookie 信息。

2. 解决登录后 404 问题：

• 前端路由配置：

若依前端项目使用 Vue.js 进行路由管理，需要在 router/index.js 文件中配置好正确的路由路径。

javascript

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/', // 根路径
      component: HelloWorld,
      // 添加 meta 信息
      meta: {
        requiresAuth: true  // 标记需要登录
      }
    },
    // 其他路由配置
  ]
})

• 在页面跳转时，确保 URL 路径正确。
• 后端接口地址：

确保前端页面访问的接口地址与后端接口地址一致。

三、代码示例：

• 若依项目中的 Nginx 配置文件：

nginx

server {
    listen       80;
    server_name  localhost;

    location / {
        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_pass http://localhost:8080/;
        proxy_cookie_path / /;
    }
}

• 若依前端项目中的路由配置文件：

javascript

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/', // 根路径
      component: HelloWorld,
      meta: {
        requiresAuth: true // 标记需要登录
      }
    },
    // 其他路由配置
  ]
})

四、总结：

• 刷新页面失效问题主要是因为 Cookie 路径不匹配，需要在 Nginx 配置中进行调整。
• 登录后 404 问题可能是由于前端路由配置错误或者后端接口地址与前端页面访问地址不一致，需要仔细检查并修改。

希望这篇文章能帮助你解决若依前后端分离项目部署 Nginx 反向代理后遇到的问题，祝你顺利部署！

若有任何问题，欢迎在评论区留言讨论！

#Java后端需要学习哪些技术#

#头条创作挑战赛##程序员##洗车店员误将客人万元水晶原石扔掉#