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

目录

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

问题

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

解决

最后在我们组2个大神的帮助下，发现main.86a07180.chunk.js这个静态资源太大了阻塞了访问，随后我怀疑是nginx配置的问题应为js不管再怎么大最后都会加载完成的除非是nginx没找到这个资源，那么有2种可能。1，静态资源路径配置有问题 2ip写错了，
找了一圈发现都不是，最后百度到了这篇文章https://blog.csdn.net/ambertian/article/details/70238020
发现是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多页面的搭建，求点赞求关注