我在Heroku上托管我的express API,在Netlify上托管我的客户端。当我在本地尝试我的注册路径时,我的cookie被定义并且该路径工作。然而,当它在生产中时,cookie总是返回未定义的,并且MyAPI超时。
请注意,cookie已从后端成功发送。我可以在开发工具中查看它。另外,cookie, get()返回一个空对象。
我正在使用Js-cookie。
我在盖茨比使用js cookie。我在express中使用CSURF作为cookie。
后端:
//CSURF Config
app.use(csurf({ cookie: true }));
//Route that generates CSRF Cookie
app.get("/getToken", (req, res) => {
res.cookie("XSRF-TOKEN", req.csrfToken());
res.end();
});
前端:
我包括了整个注册功能。请注意,这是两个endpoint调用,一个用于检索cookie,另一个用于创建用户记录。
userSignUp = async (email, password, resetForm) => {
console.log("THis is a test of the emergency..")
await fetch(process.env.API + "getToken", {
mode: "cors", // no-cors, cors, *include
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
credentials: "include", // include, *include, omit
headers: {
"content-type": "application/json",
},
method: "GET",
})
const token = Cookies.get("XSRF-TOKEN")
alert(Cookies.get("XSRF-TOKEN"))
const data = await fetch(process.env.API + "signUp", {
body: JSON.stringify({ email: email, password: password }),
mode: "cors", // no-cors, cors, *include
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
credentials: "include", // include, *include, omit
headers: {
"content-type": "application/json",
"csrf-token": token,
},
method: "POST",
}).catch(error => this.setState({ isError: true }))
if (data.ok) {
console.log(data.ok)
data.json().then(content => {
console.log(content)
this.props.changeAuth(content.authStatus)
this.props.setCategories(content.user.categories)
this.props.getEvents(content.user.events)
resetForm()
})
} else {
this.setState({
isError: true,
})
}
}
...在生产中,cookie总是返回未定义的。。。
一个可能的原因可能是您在生产中使用HTTPS(应该是这样),浏览器忽略了CSRF cookie,因为它没有设置为安全cookie。要解决此问题,请在生产中使用安全cookie,在开发中使用非安全cookie。
注意
要使第一个cookie安全,请替换此代码
app.use(csurf({ cookie: true }));
随着:
app.use(csurf({
cookie: {
httpOnly: true,
secure: !devModeFlag
}
}));
httpOnly
设置确保客户端上的JS不能接触此cookie,这有助于提高安全性。布尔devModeFlag
变量在开发中应设置为true,在生产中应设置为false。
要使第二个cookie安全,请替换此代码
res.cookie("XSRF-TOKEN", req.csrfToken());
随着:
res.cookie("XSRF-TOKEN", req.csrfToken(), { secure: !devModeFlag });
如果前端域和服务器域不同,cookie将无法工作。
您可以通过Netlify设置代理,将所有请求重定向到前端域到后端域的路径(例如/api/
)。
要设置代理,您可以使用以下配置在发布目录(例如,public
)中创建一个\u重定向
文件:
/api/* https://<server-url>:<server-port>/:splat 200
最后,将所有HTTP请求发送到该前端路径(例如https://
我试图在刀片组件中呈现一个简单的对象数组。我的代码在本地机器上运行良好,但在生产中抛出“未定义变量”错误。我正在使用Laravel Forge和Digital Ocean为我的网站服务。PHP版本在这两种环境中都是匹配的。 同样,这在本地工作非常好。只有当我在生产中访问我的站点时才抛出错误。感谢任何帮助。
问题内容: 我想在切换时更新状态,但在处理程序中未定义对象。根据教程文档,我应该引用该组件。我想念什么吗? 问题答案: ES6 React.Component不会自动将方法绑定到自身。您需要将它们自己绑定到构造函数中。像这样:
快速会话在开发环境中工作,因为它在我的浏览器中设置了“connect.sid”cookie。然而,在生产中,它不存储cookie,并且不是使用相同的会话——它每次都会创建一个新的会话。我相信,如果我能以某种方式保存第三方cookie,这个问题就会得到解决,因为我的应用程序是使用Heroku部署的。最后,我还使用了Express cors来避免CORS问题(不知道这是否与cookie问题有关)。我在
我在服务器中有这个.js 在我的客户中(反应) 在我的督促下,我做了这项检查 为什么会这样呢?我不认为这是cors的问题,因为我已经做了 我的package.json
我试图通过反应路由器将道具从一个组件传递到另一个组件。当我试图从子组件获取道具时,我得到了这样一条消息。这是我的代码: Tracks.jsx: app.jsx: Album.jsx:
在reactnavtive应用程序中,我们在axios中为url使用超文本传输协议,一切正常,现在我们将超文本传输协议更改为https,但Apis失败了...应用程序不工作...为什么?请帮帮我。