🐛 [BUG] 升级到 6 后，页面不停刷新

[polimao]

🐛 bug 描述

页面不断刷新，报 webpack connect fail

当用 localhost:8000 访问项目是正常的。但本地开发用上 nginx 配置域名 www.test.com，就不停的刷新。控制台报错 ：WebSocket connection to 'ws://www.test.com/' failed.

📷 复现步骤 | Recurrence steps

配置 nginx server 用域名代替 localhost:8000 便会出错

pro create myapp umi4 tyarn yarn start

nginx -s start 访问域名

🏞 期望结果 | Expected results

修复正常，不会重加载

无

💻 复现代码 | Recurrence code

无

nginx 配置如下：

server {
    listen 80;
        underscores_in_headers on;

    server_name gc.test.local;

    location =/ {
        proxy_pass http://localhost:8000;
    }

    location / {
        proxy_pass http://localhost:8000;
    }
}

© 版本信息

• Ant Design Pro 版本: 6.0.0
• umi 版本：4
• 浏览器环境 ：chrome
• 开发环境： mac OS

🚑 其他信息

[brook0730]

你的nginx反代配置错了，下面是我的pro5的相关nginx配置

location / {
    proxy_pass http://127.0.0.1:8000;
    proxy_set_header X-Read-IP $remote_addr;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

location ~ /websocket {
    proxy_pass http://127.0.0.1:8000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

location ~ /sockjs-node {
    proxy_pass http://127.0.0.1:8000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

[polimao]

你的nginx反代配置错了，下面是我的pro5的相关nginx配置

location / {
  proxy_pass http://127.0.0.1:8000;
  proxy_set_header X-Read-IP $remote_addr;
  proxy_set_header Host $host;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

location ~ /websocket {
  proxy_pass http://127.0.0.1:8000;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
}

location ~ /sockjs-node {
  proxy_pass http://127.0.0.1:8000;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
}

按照你这个配置了，不能解决我的问题，不过谢谢，我在用的是 pro6，不是pro5 。

[brook0730]

5跟6 websocket路径不一样而已，让/支持ws即可，下面配置已测试有效

location / {
    proxy_pass http://127.0.0.1:8000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

也可以不用nginx，修改config目录下proxy.ts文件

[polimao]

问题解决了，但，有新的问题，不知道与此是否相关，每次更改代码，引起页面热更新之后，页面的按钮和链接全失效，无法点击，无法选中。必须手动刷新，才可以恢复

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

这可能是由于 hot-reload 引起的，您可以尝试将 webpack 的热更新功能关闭。您可以在 umi 的配置文件 .umirc.ts 或者 config/config.ts 中添加以下配置来关闭热更新：

export default {
  // ...其他配置
  devServer: {
    hot: false,
  },
};

如果您想保留 webpack 的热更新功能，您可以尝试手动触发 umi 的 reload 函数来解决此问题，例如在 src/app.tsx 文件中添加以下代码：

export function render(oldRender: () => void) {
  if (process.env.NODE_ENV === 'development' && module.hot) {
    module.hot.accept();
  }
  // 延迟 100ms 触发 umi 的 reload，避免部分热更新问题
  setTimeout(() => {
    oldRender();
    if (process.env.NODE_ENV === 'development') {
      window.g_history.listen(() => {
        window.g_app._store.dispatch({
          type: 'global/routeChange',
        });
      });
    }
  }, 100);
}

此处的 routeChange 是一个全局 dva action，在该 action 中会清空所有 dva 的 model，然后再重新装载 model，可以解决热更新带来的问题。

[chenshuai2144]

值得注意是的百分之二十的问题都可以用重装依赖来解决，所以你可以尝试一下： 删除 'node_modules' 文件夹 -> 删除 'package-lock.json'或 'pnpm-lock.yaml' 文件 -> 运行 'pnpm install' 或 'npm install' 命令

这个问题可能是由于前端开发过程中的一些配置问题导致的。你可以尝试以下解决方案：

1. 确保nginx配置正确：检查nginx配置文件中的server_name是否正确设置为www.test.com。
2. 检查反向代理配置：确保nginx中的反向代理配置正确。在你的nginx配置文件中，proxy_pass应该指向正确的后端服务器地址和端口，例如proxy_pass http://localhost:8000;。
3. 检查防火墙设置：如果你的机器上有防火墙，确保防火墙允许流量通过80端口。
4. 检查浏览器设置：尝试在其他浏览器中打开项目，看看是否仍然出现刷新问题。有时浏览器的缓存或插件可能会导致一些奇怪的问题。
5. 清除浏览器缓存：清除浏览器缓存，并重新加载页面，看看问题是否得到解决。
6. 检查网络连接：确保你的机器可以正常访问域名www.test.com，可以尝试ping该域名，看看是否能够正常获取到IP地址。
7. 更新依赖项：检查项目中的依赖项是否是最新的版本，并尝试更新相关依赖项，特别是与打包工具和webpack相关的依赖项。

如果以上解决方案都没有解决问题，你可以尝试以下进一步的调试

[BingGeGeWu]

哥们，咋解决的，问题开了，给个结尾呀