Cookie 未通过“Set-Cookie”Header 在 chrome 中设置
Cookies don't get set in chrome via `Set-Cookie` Header
我在前端 (Next.JS) 中通过 Express.JS 设置 cookie 时遇到一些问题。
这些是我从API (/login
) 回来的Headers:
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 354
Content-Type: application/json; charset=utf-8
Date: Sun, 21 Mar 2021 19:34:19 GMT
ETag: W/"162-9yg5khk3mdMK+w5SIteR+26LIrw"
Keep-Alive: timeout=5
Set-Cookie: refresh_token=<INSERT REFRESH_TOKEN HERE>; Max-Age=2592000; Expires=Tue, 20 Apr 2021 19:34:19 GMT; HttpOnly
X-Powered-By: Express
这是 Express 后端中的代码:
app.post('/login', cookieMiddleware, async (req, res) => {
try {
console.log('login now happening');
if (!req.body.code) throw new Error('no code was provided.');
const code = req.body.code;
const data = await fetchToken(
code,
CREDENTIALS.REDIRECT_URI,
CREDENTIALS.CLIENT_SECRET,
CREDENTIALS.CLIENT_ID,
);
res.cookie('refresh_token', data.refreshToken, {
httpOnly: true,
maxAge: 30 * 24 * 60 * 60 * 1000,
});
res.status(200).json(data);
res.end();
return;
} catch (err) {
res.status(500);
res.end();
return;
}
});
(我也尝试过将域设置为 localhost
并将 path
设置为所有可以想象到的内容)
这是cookieMiddleware
:
export const cookieMiddleware = (req: Request, res: Response, next: NextFunction): void => {
const cookies = req.cookies;
console.log('Cookies: ', JSON.stringify(cookies));
const signedCookies = req.signedCookies;
console.log('Signed Cookies: ', JSON.stringify(signedCookies));
next();
};
在 Chrome 中,cookie 没有显示,即使我将其设置为非 httpOnly
。
我总是从中间件的控制台中得到这个:
Cookies: {}
Signed Cookies: {}
编辑:
我现在已经使用 Postman 对其进行了测试并且它可以正常工作,但是 chrome/via 前端的结果仍然相同。
编辑 2:
我已经在下面写下了答案,这应该可以解决所有问题。
我找到了答案
问题是 cors
和 fetch
-api。
要设置 cookie,您需要在前端执行此操作:
fetch('<DOMAIN>/<PATH>',
{
...
credentials: 'include',
mode: 'cors'
}
)
在后端:
app.use(
cors({
credentials: true,
origin: '<DOMAIN>'
})
)
但是你必须给后端提供完整的来源URL,例如:
您的前端 在localhost:3000
上运行,您的后端 在*localhost:8080
上运行**。
这将是您的前端代码:
fetch('http://localhost:8080/login', {
...
credentials: 'include',
mode: 'cors'
...
}
)
那么这就是后端代码:
app.use(
cors:({
credentials: true,
origin: 'http://localhost:3000'
})
)
使用相同的方法,您可以将 Cookie 发送回您的 API。
我在前端 (Next.JS) 中通过 Express.JS 设置 cookie 时遇到一些问题。
这些是我从API (/login
) 回来的Headers:
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 354
Content-Type: application/json; charset=utf-8
Date: Sun, 21 Mar 2021 19:34:19 GMT
ETag: W/"162-9yg5khk3mdMK+w5SIteR+26LIrw"
Keep-Alive: timeout=5
Set-Cookie: refresh_token=<INSERT REFRESH_TOKEN HERE>; Max-Age=2592000; Expires=Tue, 20 Apr 2021 19:34:19 GMT; HttpOnly
X-Powered-By: Express
这是 Express 后端中的代码:
app.post('/login', cookieMiddleware, async (req, res) => {
try {
console.log('login now happening');
if (!req.body.code) throw new Error('no code was provided.');
const code = req.body.code;
const data = await fetchToken(
code,
CREDENTIALS.REDIRECT_URI,
CREDENTIALS.CLIENT_SECRET,
CREDENTIALS.CLIENT_ID,
);
res.cookie('refresh_token', data.refreshToken, {
httpOnly: true,
maxAge: 30 * 24 * 60 * 60 * 1000,
});
res.status(200).json(data);
res.end();
return;
} catch (err) {
res.status(500);
res.end();
return;
}
});
(我也尝试过将域设置为 localhost
并将 path
设置为所有可以想象到的内容)
这是cookieMiddleware
:
export const cookieMiddleware = (req: Request, res: Response, next: NextFunction): void => {
const cookies = req.cookies;
console.log('Cookies: ', JSON.stringify(cookies));
const signedCookies = req.signedCookies;
console.log('Signed Cookies: ', JSON.stringify(signedCookies));
next();
};
在 Chrome 中,cookie 没有显示,即使我将其设置为非 httpOnly
。
我总是从中间件的控制台中得到这个:
Cookies: {}
Signed Cookies: {}
编辑: 我现在已经使用 Postman 对其进行了测试并且它可以正常工作,但是 chrome/via 前端的结果仍然相同。
编辑 2:
我已经在下面写下了答案,这应该可以解决所有问题。
我找到了答案
问题是 cors
和 fetch
-api。
要设置 cookie,您需要在前端执行此操作:
fetch('<DOMAIN>/<PATH>',
{
...
credentials: 'include',
mode: 'cors'
}
)
在后端:
app.use(
cors({
credentials: true,
origin: '<DOMAIN>'
})
)
但是你必须给后端提供完整的来源URL,例如:
您的前端 在localhost:3000
上运行,您的后端 在*localhost:8080
上运行**。
这将是您的前端代码:
fetch('http://localhost:8080/login', {
...
credentials: 'include',
mode: 'cors'
...
}
)
那么这就是后端代码:
app.use(
cors:({
credentials: true,
origin: 'http://localhost:3000'
})
)
使用相同的方法,您可以将 Cookie 发送回您的 API。