前端：[Axios]
const formSubmit = async (e) => {
e.preventDefault()
const formData = new FormData(e.target)
const email = formData.get('email')
const password = formData.get('password')
try {
const res = await axios.post('http://172.16.2.19:3001/api/v1/auth/login', {
email,
password,
})
console.log(res.data) // its okay, I can login if email & password are correct.
} catch (error) {
console.log(error)
}
}后端[Nodejs编译Js]：
App.js内部：
const cors = require('cors')
app.use(cors({ credentials: true }))Login.js内部（/auth/login endpoint）：
// ... code, then... if email & password are correct:
// 3600000ms = 1hour
res.cookie('jwt', token, { httpOnly: true, expires: new Date(Date.now() + 3600000 })
res.status(200).json({
status: 'success'
token,
data: userDoc,
})然后，当我登录浏览器时：
我可以成功登录，但不会创建cookie，请参阅：
- 前端http服务（react应用程序）在
http://172.16.2.19:3000上运行 - 后端http服务（expressjs）运行在
http://172.16.2.19:3001上 - 我从前端发送的axios请求是：
http://172.16.2.19:3001
那有什么问题
浏览器中没有创建cookie的问题阻止了我继续设计前端应用程序，因为如果我想从我的API请求任何东西，我必须进行身份验证，我在API上创建的所有路由都受到保护，所以如果我想从API请求任何东西，我将不得不发送我的jwt令牌沿着请求。
编辑**：
以下是成功登录后/auth/login端点的响应：
- 我使用勇敢的浏览器，最新版本。
- 我在firefox上试过了，它也有同样的问题。
4条答案
按热度按时间dsekswqp1#
伙计们，伙计们，我找到了！！经过3个小时的研究，让我保存您的时间：
对于任何有同样问题的人，你所要做的就是
修改你的后端代码：
到
并确保在前端对每个请求（登录POST方法和所有其他需要身份验证的请求）使用
withCredentials: true为什么？
将
origin属性设置为true将反映请求的来源，如果您想指定特定的域，则origin属性可以是字符串，例如：http://localhost:3000.但是如果你有多个客户端，将其设置为true是一个明智的选择。对于那些想知道移动的设备的情况下，指定一个字符串的起源字段与一个特定的域。这个CORS的问题只发生在浏览器中，任何其他客户端都不使用CORS策略。
kupeojn62#
为了防止其他人遇到这个问题，如果您的客户端和服务器位于不同的域上，您还应该设置
sameSite: 'none'和secure: truehttps://web.dev/samesite-cookies-explained/
q3aa05253#
我会通过将
{withCredentials: true}作为第三个参数传递给axios方法来检查，以允许浏览器通过请求设置cookie。csbfibhn4#
我不认为使用后端来保存cookie是正确的，因为cookie是一个独立于数据库的浏览器功能。但我可能错了。当post成功时，res将返回一个token。您可以将此令牌保存在浏览器的本地存储中。
然后，您必须创建一个授权标头