记录一次nuxt3的踩坑

nuxt3踩坑记录

前提概要

今天来分享一下关于nuxt3项目的一次踩坑记录，事情是这样的，我在公司开发nuxt3项目的时候，发现之前的后端留下的接口查询速度太慢了，于是我打算使用nestjs这个上手了几天的框架来自己写写接口，然后咧，辛苦写完了测试完成了之后我就部署到内网服务器了，然后通过这台电脑的frpc内网穿透，在nginx再转发到最后的域名，nginx相当于经过了两次代理，一次代理到用于做内网穿透的公网服务器ip，然后再由这个公网ip解析到这个域名。

我做完测试完成了我就微信发了条消息给老板，说我已经更新替换了之前的nuxt3项目的接口服务，整体速度都比之前快了一个档次，快下班了哈哈，完成任务开开心心。

结果过了几分钟，老板跟我说，打开速度好像比之前慢了，而且还有bug，跳转不了页面，我当时就？？？

问题分析

浏览器缓存问题？

我当时听完就有点懵，因为我在我本机电脑测试公网的域名是完全正常的，我就在想是不是老板电脑浏览器有缓存还是啥，可能客户端的问题。于是我让老板清浏览器缓存，或者换个浏览器试试，结果依然不行

电脑问题？

我当时就认为是正常的，于是我自己手机打开了这个域名测试，发现我手机确实也是存在那个bug的，我瞬间就觉得是不是我电脑哪里有问题，思考了一些，电脑开了很多应用，我直接使用我的重启大法，重启完之后发现还是不行，后面我再仔细思考了一下关于nuxt3的问题

nuxt3的问题？

因为nuxt3是ssr + spa混合模式，每次刷新进入页面的时候会是ssr模式，但是再进行点击的时候就是spa模式，我忽然就思考到了这里，然后我思考了一下，我的nuxt3接口服务请求的地址是内网服务器的ip，我瞬间就大脑清晰了，客户端渲染的时候获取不到内网的ip地址，但是为啥我本地测试还是正常的呢，我又思考了一下，我是不是开了啥软件，我发现我电脑vpn一直是开着的，大胆猜测了下vpn的问题，结果还真是

但我把vpn关掉之后再重新测试就测出来了那个问题哈哈哈，前面其实我一直没往这里想哈哈哈，主要是给vpn给坑了，没想到开vpn测试还有这种奇效。

解决方案

定位到问题是内网地址的原因，我就随便找了一个域名，在那个域名下进行了nginx转发，我使用的是一个nuxt3服务的域名，加上了一个/api前缀

server {
    listen 60080 proxy_protocol;
    server_name xxx;
    real_ip_header proxy_protocol;
    real_ip_recursive on;
    set_real_ip_from xxx.xxx.xxx.xxx; //公网域名
    set_real_ip_from 127.0.0.1;
    location / {
        proxy_pass http://127.0.0.1:8082;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        # 如果使用 WebSocket，添加以下配置
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
	
    //nest服务器的api
    location /api/ {
        proxy_pass http://127.0.0.1:3000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        # 如果使用 WebSocket，添加以下配置
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

总结

总结一下吧，为啥标题是nuxt3的踩坑记录，好像和nuxt3也没啥子关系吧哈哈哈，但是还是有点点关系的，因为nuxt3的混合模式+我使用内网服务器的ip+vpn测试成功了，再加上不使用vpn的情况下，ssr单个页面也可能成功，就导致了我上面以为用内网ip也可以哈哈哈，不过好在问题已经处理完成了，不愧是我，虽然加班了一小时，不过好在总算是解决问题了哈哈哈，记录一下这次的踩坑