Materialize模板登录后为何自动从localhost重定向到127.0.0.1？

问题背景 #

我为GitHub登录功能编写了自定义处理函数，但代码中完全没有编写从localhost:3000重定向到127.0.0.1:3000的逻辑，实际却发生了该跳转，导致开发环境中Cookie无法正常存储，需要排查原因。

前端登录处理代码 #

const handleLoginGithub = (
    params: LoginGithubParams,
    errorCallback?: ErrCallbackType
) => {
    axios
        .get(authConfig.loginGithubEndpoint, { params })
        .then(async (res) => {
            /*window.localStorage.setItem(
                authConfig.storageTokenKeyName,
                res.data.accessToken
            )*/

            const returnUrl = router.query.returnUrl

            setUser({ ...res.data })
            await window.localStorage.setItem('userData', JSON.stringify(res.data))

            //router.replace('/home')
        })
        .catch((err) => {
            if (errorCallback) errorCallback(err)
        })
}

相关HTTP请求/响应详情 #

请求概览 #

Request URL: http://localhost:3000/api2/gh-auth-complete?code=f87f5157cbf035a73a50
Request Method: GET
Status Code: 200 OK
Remote Address: [::1]:3000
Referrer Policy: strict-origin-when-cross-origin

响应头 #

connection: close
content-length: 681
content-type: application/json; charset=utf-8
date: Sun, 09 Oct 2022 22:18:31 GMT
set-cookie: vapor-session=ReDSKZniIFtUqq0kThCkLbBe7vBoCpzpCUWqooA6xYQ=; Max-Age=31536000; Path=/; Secure; SameSite=Lax
Vary: Accept-Encoding

请求头 #

Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
Connection: keep-alive
Host: localhost:3000
Referer: http://127.0.0.1:3000/
sec-ch-ua: "Chromium";v="106", "Google Chrome";v="106", "Not;A=Brand";v="99"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "macOS"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

原因分析 #

• GitHub OAuth回调配置不一致：检查GitHub OAuth应用的回调URL设置，可能同时配置了localhost:3000和127.0.0.1:3000，或者回调地址直接写的是127.0.0.1，导致GitHub授权完成后直接跳转到127.0.0.1，而非前端发起请求的localhost。
• 后端服务的隐式重定向逻辑：从响应头能看出后端用的是Vapor框架，可能在处理gh-auth-complete接口时，内部存在域名替换或跳转逻辑，自动将localhost替换为127.0.0.1。
• 授权起始页面域名不统一：请求头的Referer显示当前页面来自127.0.0.1:3000，说明授权流程的起始页面是127.0.0.1，后续回调跳转延续了这个域名，和前端请求接口用的localhost形成差异。
• Cookie的Secure属性限制：响应头中的Cookie设置了Secure属性，但开发环境用的是HTTP而非HTTPS，这本身就会导致Cookie无法存储；加上localhost和127.0.0.1被浏览器判定为不同Origin，进一步加剧了Cookie存储失败的问题。

解决建议 #

• 统一所有环境的域名：将前端启动地址、GitHub回调URL、后端接口地址全部统一为localhost:3000或127.0.0.1:3000，消除跨Origin的差异。
• 开发环境移除Cookie的Secure属性：仅在开发环境下关闭Cookie的Secure配置，因为该属性要求必须在HTTPS环境下才能存储Cookie。
• 检查后端Vapor框架配置：确认后端是否存在自动替换域名的中间件或配置项，比如强制将请求域名转换为127.0.0.1的逻辑，如有则调整为和前端一致的域名。

内容的提问来源于stack exchange，提问作者Alma