# pc 访问 127.0.0.1 显示 404 报错

# 背景

调试 react-native 的时候进入项目下运行 packager react-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 端口被占用。

查看端口查看pid

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

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

    pc

安卓

# 总结

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