localhost和127.0.0.1的区别

起因

最近在写Vue，突然看到之前在刚学习框架的时候用Vue写的音乐播放器，出于好奇就开始品鉴起来了当时写的代码，一看吓一跳，这真是依托啊，于是决定重新写一下，同时拾起半年没写的Vue。

过程

这个音乐播放器我在github上fork了两个nodejs的后端服务，一个是网易云接口，另一个是酷狗的
在写dockerfile的nginx的时候有这么一段

server {
    listen 80;
    server_name localhost;

    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

    location /kugou/ {
        proxy_pass http://localhost:3001/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location /netease/ {
        proxy_pass http://localhost:3002/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

于是在接下来的时候出现了这样的情况

本地开发的时候如果开了vpn，酷狗的/search接口就会疯狂返回502，但是关掉vpn就无事发生了
在服务器上，这个/search接口一直是返回502，不管开不开vpn

经过拷打AI，发现这件事情是这样的

在本地，如果开启vpn，502 Bad Gateway 永远是代理服务器（Proxy）发出的。这意味着浏览器发出的请求，先撞到了一个”中间人”，这个中间人尝试去连 3001 失败了，所以报了 502。

在服务器上则不然，其实是nginx的问题，在 Alpine 镜像里，localhost 解析为 IPv6 (::1) 的优先级往往高于 IPv4 (127.0.0.1)。Nginx 试图用 IPv6 连 Node，但 Node 只监听了 IPv4，于是 Nginx 报错502，因此把nginx中的localhost修改成127.0.0.1即可，强制指向ipv4。