[英]Node API on Heroku sends set-cookie headers, but Chrome won't set them (Postman, however, will)
I made a completely stripped down test API and frontend to demonstrate this issue, which will take place when at least the API is deployed to Heroku:我做了一个完全精简的测试 API 和前端来演示这个问题,至少在 API 部署到 Heroku 时会发生:
This is the whole API.这是整个 API。 app.js:
应用程序.js:
const express = require('express')
const cors = require('cors')
const app = express()
const router = express.Router()
// This was supposed to help with problems from Heroku's Vegur
// I also tried app.enable('trust proxy') syntax
app.set('trust proxy', true)
// allow cors
const corsOptions = {
'origin': true,
'credentials': true,
}
app.options('*', cors(corsOptions))
app.use(cors(corsOptions))
const port = process.env.PORT || 3000
app.use(router)
router.get('/', function (req, res) {
res.send('test ready')
})
router.post('/', function (req, res) {
res.cookie("testCookie", {
led: "zepplin",
pink: "floyd",
}, {
encode: String
})
res.send("cookie set")
})
app.listen(port, () => {
console.log(`listening on port ${port}`)
})
package.json:包.json:
{
"name": "testapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node app.js",
},
"author": "",
"license": "ISC",
"dependencies": {
"cors": "^2.8.3",
"express": "^4.15.2"
}
}
And this is the entire frontend.这是整个前端。 A php one-liner to make it go, index.php:
一个 php 单行使其运行,index.php:
<?php header( 'Location: /index.html' ) ; ?>
And index.html:和 index.html:
<!DOCTYPE html>
<html>
<head>
<script>
function fetchAPI() {
fetch(your_heroku_api_url, {
method: 'POST',
credentials: 'include',
})
.then((response) => {
return response.text()
})
.then((text) => {
console.log({res: text})
})
.catch((er) => {
console.log({error: er})
})
}
</script>
</head>
<body>
<button onclick=fetchAPI()>FETCH REQUEST</button>
</body>
</html>
If I hit that POST route with Postman, I get the intended behavior.如果我使用 Postman 访问该 POST 路由,我就会得到预期的行为。 The cookies will be set.
将设置 cookie。 If I do so from Chrome.
如果我从 Chrome 这样做。 I do not.
我不。 I do get the set-cookie header, but Chrome will not set that cookie:
我确实得到了 set-cookie 标头,但 Chrome 不会设置该 cookie:
So I'm pretty stuck.所以我很困。 I have an auth token implemented similar to this in a more complex app suffering from the same issue.
我在遇到相同问题的更复杂的应用程序中实现了与此类似的身份验证令牌。 It just uses Express's res.cookie() method like above, it also arrives at the browser, it will also be ignored.
它只是像上面那样使用了Express的res.cookie()方法,它同样到达了浏览器,它也会被忽略。 Further I have my sessions set up with client-sessions .
此外,我还使用client-sessions设置了我的会话。 Those cookies exhibit the same unsuccessful behavior.
这些 cookie 表现出相同的不成功行为。 Occasionally, I will even see the cookie sent in the request and I have no idea how that is happening since it is never being set in the browser.
有时,我什至会看到请求中发送的 cookie,但我不知道这是怎么发生的,因为它从未在浏览器中设置过。 Again there, everything will work when run locally on separate ports or if the local or Heroku API is accessed by Postman.
同样,当在单独的端口上本地运行时,或者如果 Postman 访问本地或 Heroku API,一切都会正常工作。
Unfortunately response in ajax call doesn't affect cookie in browser.不幸的是,ajax 调用中的响应不会影响浏览器中的 cookie。
If you want to change the cookie of the browser, you need to extract header from the response and set it to browser cookie.如果要更改浏览器的 cookie,需要从响应中提取 header 并将其设置为浏览器 cookie。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.