无法从 MERN 应用程序的后端在浏览器中接收/设置 cookie,后端托管在 heroku 上,前端托管在 netlify 上

2024-01-20

我有一个 MERN 应用程序,其后端托管在 Heroku 上,前端托管在 netlify 上。部署应用程序后,我无法在浏览器中看到 cookie,但它在本地主机上运行良好。我认为这是由于后端和前端端口不同造成的,我缺少什么,请帮忙


你是对的。 Cookie 不跨域兼容。如果是的话,这将是一个严重的安全问题。解决问题的最简单方法是将 cookie 作为res对象,然后在前端手动设置cookie。

以此为例。我将使用 JavaScript 风格的伪代码来完成此操作。不要复制粘贴此内容,因为这很可能不会立即起作用。这就是您要在后端执行的操作:

// 1. Authenticate the user.
const userData = await authenticateUser();
const userToken = await verifyUser(userData);

// 2. Return the response object.
return response.status(200).json({
  status: 'success',
  data: userData,
  token: userToken,
});

在前端:

const response = await axios.post(...); // your API call, will return above object.

// set your authentication token here.
// the 'options' object will contain all possible cookie options, example would be 'secure'.
cookies.set('token', response.data.token, options);

// alternatively, set the cookie in the local storage.
localStorage.setItem('token', response.data.token);

您需要在前端相应地设置cookie。

进一步阅读:MDN Docs https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie


EDIT: 你的问题不清楚。你第一次谈论cookies,但现在你谈论的是httpOnly饼干。请更具体地提出您的问题。

是无法设置的httpOnly如果是跨域,React.js 中的 cookies。 React 只负责网站的“视图”。httpOnlycookie 只能在服务器端设置。客户端 JavaScript 无法读取或设置该特定 cookie,但可以发送它。除非你的 Netlify 中有可以执行服务器端操作的东西,否则我认为这是不可能的。

最好的选择是实际上只使用相同的域。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

无法从 MERN 应用程序的后端在浏览器中接收/设置 cookie,后端托管在 heroku 上,前端托管在 netlify 上 的相关文章

  • React JS 服务器端问题 - 找不到窗口

    你好 我正在尝试在我的reactJS项目中使用react rte 我有服务器端渲染 每次我想使用这个包时 我都会得到 return msie 6 9 b test window navigator userAgent toLowerCase
  • Nodejs 调试生产中的错误

    我有一个在生产环境中运行的 Nodejs 脚本 我不太可能 千分之一 遇到这样的错误 TypeError value is out of bounds at checkInt buffer js 1009 11 at Buffer writ
  • 添加要在给定命令中运行的 .env 变量

    我有一个 env 文件 其中包含如下变量 HELLO world SOMETHING nothing 前几天我发现了这个很棒的脚本 它将这些变量放入当前会话中 所以当我运行这样的东西时 cat env grep v xargs node t
  • 在 React 中将模板分离到外部文件

    我正在为客户开发 ReactJS 应用程序 我希望客户端能够自定义应用程序中的一些配置和模板 所以我创建了一个config js file window APP CONFIG url example com template item di
  • 带有 git Remote 的 Gem 文件在 Heroku 推送上失败

    我的 gemfile 中有以下行 gem client side validations git gt email protected cdn cgi l email protection Dakuan client side valida
  • Node.js http get 请求错误事件未拾取 404 或 403

    我正在对图像发出 HTTP GET 请求 有时图像会以 404 或 403 的形式返回 令我惊讶的是 我必须明确检查这一点 而不是在错误事件中选择它 这是它的工作原理还是我在这里遗漏了一些东西 function processRequest
  • 从旧的外部 Javascript 更改 React 组件的状态?

    如何从旧的 jQuery soup 中更改 React 组件的状态 代码 我有一个这样的组件 var AComponent React createClass getInitialState function return ids rend
  • Chrome/Firefox 在后台发送两个 POST,间隔恰好 5 秒,仅调用一次来获取 Nodejs 8.0.0 服务器

    注意 这不是飞行前选项 也不是网站图标或其他类似内容 实际上是 2 个帖子 下面有一个屏幕截图可以更清楚地显示这一点 我的规格 版本 macOS 塞拉利昂版本 10 12 3 Chrome 版本 61 0 3128 0 官方版本 开发版 6
  • Node JS - 如何检测用户语言

    我正在尝试在纯 Node js 中检查用户语言 而不使用 npm 的任何扩展 我使用了进程和全局命令 有很多规范但我找不到系统语言 这是获取默认区域设置的独立于操作系统 节点 浏览器的方法 let locale Intl DateTimeF
  • 在react-big-calendar中单击事件时添加弹出窗口?

    当单击事件时 我无法将弹出窗口添加到事件中 弹出窗口似乎只显示在事件槽中 而不是显示在事件槽的顶部 此外 由于我为事件创建了一个自定义组件并尝试在自定义组件中实现弹出窗口 因此只有当我单击事件名称时才会显示弹出窗口 这是代码 class C
  • 如何将 Relay 查询从 TypeScript 转换为 ES5?

    我正在用 TypeScript 编写一个网络应用程序 该应用程序使用 Facebook 的 React 和 Relay 我的 TypeScript 源代码使用 TypeScript 编译器 TSC 编译为 ES6 代码 然后 使用 Babe
  • libxmljs 的替代品 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 目标 使用 Node js 访问网页 使用 xpath 语法操作 DOM 并打印新的 DOM libxm
  • 缺少节点-v59-linux-x64/grpc_node.node

    我正在尝试在我的服务器中使用 Firebase admin SDK 当我部署时 出现错误 我在 firebase admin node module 映射中缺少文件 node v59 linux x64 grpc node node 我在包
  • Should js 无法读取 null 的属性“should”

    我尝试在node中使用测试工具mocha 考虑以下测试场景 var requirejs require requirejs requirejs config Pass the top level main js index js requi
  • 使用 mongoose 通过 React 应用程序将图像上传到 mongodb 数据库

    我正在为找到的对象创建一个反应应用程序 我想允许用户上传这些对象的照片 我尝试使用 axios 通过 post 请求将图像发送到猫鼬服务器 但它不起作用 这就是我如何将图像存储在带有预览的 React 组件中 handleImage eve
  • NestJS e2e 测试模拟会话装饰器

    我正在尝试使用 supertest 编写一个 e2e 测试 其中我的控制器实际上使用了 Session 装饰师 然而 我不想承担使用数据库连接等启动会话的全部负担 因此测试中的我的应用程序实际上并未初始化会话 相反 我想首先模拟掉装饰器提供
  • React 在同一组件中渲染多个模态

    我对 React 和一般编码都很陌生 我试图在同一组件中渲染多个模态 但它们都是同时渲染的 因此看起来所有链接都在最后一个模态中渲染文本 这是状态设置的地方 class Header extends React Component cons
  • 根据特定字符获取整个字符串或子字符串

    我有一个包含 MIME 类型的字符串 例如application json 现在我想将其与实际的 HTTP 标头进行比较 在本例中content type 如果标头包含 MIME 类型 那么就很简单 if mimeType contentT
  • Nodejs Express中间件函数返回值

    我正在使用 NodeJS 和 Express 我有以下路线 中间件功能是Mobile 如果我不使用 return next 在 isMobile 函数中 应用程序会卡住 因为 NodeJS 不会移至下一个函数 但我需要 isMobile 函
  • 如何修复 pgbackups 错误:备份 url 无效?

    我正在尝试按照迁移到 Cedar 的说明进行操作 除了我进行了重大重写 因此这不是前一个应用程序的分支 而是一个单独的分支 并停留在数据库迁移步骤 我安装了 pgbackup 和 heroku postgresql 插件 但得到了这个结果

随机推荐

  • AVSpeechSynthesizer isSpeaking 在 Swift 中不起作用

    因此 更新到 Xcode 12 0 1 后 AVSpeechSynthesizer 现在可以在模拟器上运行 它已经有一段时间没有为我工作了 现在 无论合成器是否正在说话 isSpeaking 变量始终为 false 我想根据合成器是否在说话
  • 如果位置不是美国,则使用 Amazon Mechanical Turk?

    亚马逊土耳其机器人 https www mturk com mturk welcome是一个大规模微外包 API 您可以在其中以相对便宜的价格 例如每张图像 0 10 U 完成大量简单的小任务 例如 此图像中是否有商店 亚马逊似乎认为这项服
  • 使用数据增强层在 Tensorflow 2.7.0 上保存模型

    尝试使用 Tensorflow 版本 2 7 0 保存具有数据增强层的模型时出现错误 这是数据增强的代码 input shape rgb img height img width 3 data augmentation rgb tf ker
  • 带 Spring JMS 和不带 Spring JMS 的 AUTO_ACKNOWLEDGMENT 模式之间的区别

    我试图了解 JMS 中的确认模式如何工作 我正在阅读这个来源 它让我非常困惑 因为它与 Spring 的文档所说的相矛盾 消息人士说一件事 从http www javaworld com article 2074123 java web d
  • firebase部署错误,错误:无法列出(项目名称)的功能

    我在 Firebase 中托管我的 Web 应用程序 并使用 Gitlab CI CD 部署它 并且它一直工作得很好 但今天由于某种原因我在管道工作时收到此错误 56Error Failed to list functions for pr
  • 为什么将 /textbackslash{} 插入到 knitr Rmd 图形中的 .tex 中?

    我有一个结果部分 其中包括代码块和文本 当我将 Rmd 编 织成 pdf 时 我的两个人物周围都有 LaTeX 代码 字幕未正确呈现 查看我的 Results tex 文件 我可以看到我有几个 textbackslash 插入图中的LaTe
  • 如何从父元素获取文本并从子元素中排除文本 (C# Selenium)

    在 Selenium 中是否可以仅从父元素而不是其子元素获取文本 例子 假设我有以下代码 div class div www google com id google gt Google Link span class helpText T
  • Java 中是否为未使用的字段分配内存?

    我想知道Java中的内存分配是如何工作的 我有一个class Duck有两个实例变量int size and String name 这些变量被初始化 如果我没有实例化此类 这些变量的内存是否会在运行时在堆上分配 谢谢 基因 几种可能的情况
  • 亚像素滚动问题,无法在 Chrome 69 上正确设置scrollTop

    我正在尝试设置scrollTop以编程方式获取某些 DOM 元素的属性 并且我有奇怪的行为 破坏了我在某些特定环境中的测试 我创建了最小的重现 the link https jsfiddle net dhilt mo4zveka 25 HT
  • 为什么 readonly 和 volatile 修饰符是互斥的?

    我有一个引用类型变量readonly 因为引用永远不会改变 只会改变它的属性 当我尝试添加volatile编译警告我它不会让两个修饰符应用于同一个变量 但我认为我需要它是易失性的 因为我不想在读取其属性时出现缓存问题 我错过了什么吗 还是编
  • PHP 中的多线程

    我现在正在尝试创建一个多线程 PHP 应用程序 我读过很多解释如何创建多线程的论文 所有这些示例都是基于在不同的辅助 PHP 文件上划分进程而构建的 实际上这也是我想做的 但有一个问题 工作太多甚至无法划分 30秒内 这是执行时间限制 我们
  • 装配控制台暂停

    像 C 和 C 一样 我们使用 system pause 如何在 MS Visual Studio 2010 汇编语言中暂停控制台 586 model flat stdcall stack 4096 data number DWORD 10
  • Tinymce - 更改锚标记内的代码 - 什么是配置设置

    我有以下一段 HTML a href class list feature link img class left src images list sell off svg div class list feature text h4 Se
  • JS中为什么对象要用括号括起来?

    给出以下示例 var foo root key1 Value1 key2 Value2 key3 Value3 与以下相比有什么区别 var foo root key1 Value1 key2 Value2 key3 Value3 在第一个
  • 如何以反应形式获取无线电的选定值

    我试图获取单选按钮的 selectedValue 并将其作为 true 与单选文本一起传递 如果选择选项 1 则 selectedValue 将发送为 true 否则发送为 false 如果选择选项 2 则 selectedValue 将发
  • Vowpal Wabbit 的 Java API?

    我正在尝试使用沃帕尔瓦比特 https github com JohnLangford vowpal wabbit 通过Java 我已经从 GitHub 下载并成功编译了代码 命令行工具运行良好 快速查看存储库后 尤其是here https
  • 如何解决Maven中的循环依赖?

    我们如何解决 Maven 循环依赖 假设A是父项目 B和C是子项目 如果 B 依赖于 C 并且 C 依赖于 B 除了使用不同的项目之外 是否有其他方法可以解决循环依赖关系 Maven不允许项目之间存在循环依赖 因为否则不清楚先构建哪个项目
  • 在源代码中存储敏感信息的最佳实践

    我很好奇是否有任何关于在源代码中存储一些敏感信息的建议 为了从一开始就明确自己 我not谈论用户密码 信用卡号等 我说的是 API 访问密钥 客户端机密和其他此类数据 这些数据与应用程序的用户不直接相关 而是与应用程序向各种组件或第三方服务
  • 正则表达式不适用于 JavaScript

    当我使用 NET 引擎测试它时 我有一个可以在 regexplib com 上运行的正则表达式 它没有找到与 JavaScript 匹配的内容 我还使用下面的代码尝试了 JSFiddle 它没有找到匹配项 它返回空值 var re RegE
  • 无法从 MERN 应用程序的后端在浏览器中接收/设置 cookie,后端托管在 heroku 上,前端托管在 netlify 上

    我有一个 MERN 应用程序 其后端托管在 Heroku 上 前端托管在 netlify 上 部署应用程序后 我无法在浏览器中看到 cookie 但它在本地主机上运行良好 我认为这是由于后端和前端端口不同造成的 我缺少什么 请帮忙 你是对的