react-native pc访问127.0.0.1 显示404报错

pc访问127.0.0.1 显示404报错

背景

调试react-native的时候进入项目下运行packagerreact-native start 并在另一个命令行窗口react-native run-android ,首次运行需要等待数分钟并从网上下载gradle依赖。因为android sdk已经添加到环境变量中，并且pc本地访问<http://localhost:8081/index.bundle?platform=android>可以看到编译好的js文件内容。接着，模拟器安卓中的dev setting 已经设置好pc的ip地址。

此时，能够看到模拟器中的安卓手机大红屏错误。

报错内容解读

1. 404 not found

2. url 是http://115.200.16.6:8081/index.bundle?platform=android

排查过程

1. 首先本地访问http://115.200.16.6:8081/index.bundle?platform=android,和http://127.0.0.1:8081/index.bundle?platform=android也是 404 not found

2. 本地访问http://localhost:8081/index.bundle?platform=android正常。

3. react-native start，react-native run-android命令运行正常。

4. 首先怀疑是否是hosts被修改导致的，查看C:\WINDOWS\System32\drivers\etc得知hosts没有被修改，正常。

5. 本地起了一个http-server -p 9999,pc 访问localhost：9999，127.0.0.1:9999以及ip:9999都正常。

6. 关闭react-native start, 使用http-server -p 8081来检验是否是端口8081的问题。此时，命令行报错，8081端口被占用。

接着结束 wifi共享大师（这个软件真的是个坑）。

7. 刷新pc页面。127.0.0.1 显示正常。reload模拟器，页面也显示正常了。

   

总结

不知道为什么，在8081端口本身被占用的情况下react-native start也不会报错。通过这次排错，下次遇到本地访问localhost正常，但是访问127.0.0.1不正常的情况应该也有可能是端口被占用导致的。最后，既然环境没问题了，helloworld项目也已经运行，就愉快得开始react-native吧~