在win10系统下nginx反向代理造成前端localhost访问失败的解决方法

目录

  1. 问题
  2. 解决方法
  3. 后续扩展

问题

因为现在的公司环境是内网开发,所以前端这边在平时开发发起请求就需要用nginx来做反向代理,然后刚好我才来公司我的电脑有事win10系统,就发现每次我npm start(我们是react项目)之后浏览器请求页面会非常缓慢甚至失败,最开始怀疑的是代理的问题,是不是被拦截了。但是有的时候页面在等待5分钟左右也会刷出来。。

解决

最后在我们组2个大神的帮助下,发现main.86a07180.chunk.js这个静态资源太大了阻塞了访问,随后我怀疑是nginx配置的问题应为js不管再怎么大最后都会加载完成的除非是nginx没找到这个资源,那么有2种可能。1,静态资源路径配置有问题 2ip写错了,
找了一圈发现都不是,最后百度到了这篇文章http://www.javashuo.com/article/p-mpkgoxoa-ho.html
发现是win10默认是先采用ipv6的解析(优先级高),所以在win10下 输入命令行ping localhost 发现会先解析到[::1]:8080,而[::1]:8080得不到请求返回,结果几分钟超时后转而代理到127.0.0.1:8080得到返回结果,然后我把这个项目下要的所有proxy_pass localhost:3000;改为了proxy_pass http://127.0.0.1:3000;并且按照这篇文章重新进行了ipv6和ipv4的优先级配置就好了。在这里插入图片描述在这里插入图片描述

后续扩展

后续我还发现在配置nginx转发静态资源的时候,只需要把 location ~ ^/static配置到static这一级,很多时候我们都会忘了还有字体图标,字体的引用。应为react start过后所有的静态资源都会打包进static里面之后放在了内存中我们看不见而已想要看见可以修改webpack.dev.conf的配置就行,而所有的字体图标都会放在static/media这一级。

待续,哪天我会写一篇webpack4多页面的搭建,求点赞求关注