简体   繁体   English

Heroku 上的节点 API 发送 set-cookie 标头,但 Chrome 不会设置它们(但是 Postman 会)

[英]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:

chrome 开发工具网络选项卡

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.

相关问题 节点 js express-session Set-Cookie on Postman/不在 Flutter http 标头中 - node js express-session Set-Cookie on Postman/ Not in Flutter http headers 为什么在使用 setRequestHeader 制作 xmlhttprequest 时无法设置 cookie 和 set-cookie 标头? - Why cookies and set-cookie headers can't be set while making xmlhttprequest using setRequestHeader? Set-Cookie 响应 Header 未在 Heroku 上设置跨站点 cookie - Set-Cookie Response Header not setting cross site cookie on Heroku 如何从 node-fetch 中获取所有 set-cookie 标头? - How to get all set-cookie headers from node-fetch? 具有Lambda代理的API网关Set-Cookie - API Gateway Set-Cookie with Lambda Proxy Cookies 不要通过“Set-Cookie”在 chrome 中设置 Header - Cookies don't get set in chrome via `Set-Cookie` Header Chrome仅设置“ Set-Cookie”标题中的第一个Cookie - Chrome only sets the first cookie from the 'Set-Cookie' header res.setHeader(“ Set-Cookie”,…)未在Node / Express中设置cookie - res.setHeader(“Set-Cookie”, …) is not setting the cookie in Node / Express Express:禁用特定路由的标头(Etag、set-cookie 等) - Express: Disable headers for specific routes (Etag, set-cookie, etc) Node.js - writeHead设置“Location”和“Set-Cookie” - Node.js - writeHead to set both “Location” and “Set-Cookie”
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM