我尝试使用React(前端)和Node+Express作为后端在按钮单击时设置cookie。我可以在网络选项卡下的响应头中看到cookie,但应用选项卡下没有设置相同的cookie。我尝试了其他帖子中提到的所有方法,但无法找到解决方案。
服务器端索引。js:
const expreess=require('express')
const cors=require('cors')
const { default: mongoose } = require('mongoose')
const app =expreess()
const user_routes=require("./routes/user_routes")
const login_routes=require("./routes/login_routes")
const feedback_routes=require("./routes/feedback_routes")
const cookieParser=require('cookie-parser')
const {requireAuth} =require("./middleware/middleware")
app.use(cookieParser())
app.use(cors({ origin: 'http://localhost:5173', credentials: true, exposedHeaders: ['Set-Cookie', 'Date', 'ETag'] }))
app.use(expreess.json())
app.use(function(req, res, next) {
res.header('Content-Type', 'application/json;charset=UTF-8')
res.header('Access-Control-Allow-Credentials', true)
res.header(
'Access-Control-Allow-Headers',
'Origin, X-Requested-With, Content-Type, Accept'
)
next()
})
app.use("/users",user_routes)
app.use("/login",login_routes)
app.use("/feedback",feedback_routes)
mongoose.connect("mongodb+srv://testuser:testuser123@cluster0.ynlelsn.mongodb.net/feedback-data")
.then(()=>{app.listen(5000,()=>console.log("MongoDB connection Successfull & Server started on port 5000...."))})
.catch((error)=>console.log("Server start failed ",error))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
反馈途径:
const express=require('express')
const router=express.Router()
router.get("/",(req,res)=>{
res.cookie("jwt","Login Data",{httpOnly:false})
res.json({data:"Fetched Data from Server"})
})
router.post("/",(req,res)=>{
res.cookie("jwt","SampleData",{httpOnly:false})
res.send("Feedback Router post")
})
module.exports=router
客户端:
import axios from "axios"
const Feedback = () => {
const handleClick=()=>{
axios.post("http://localhost:5000/feedback",{withCredentials: true})
.then((res)=>console.log(res))
.catch((error)=>console.log(error))
}
const handleClickGet=()=>{
axios.get("http://localhost:5000/feedback",{withCredentials: true})
.then((res)=>console.log(res))
.catch((error)=>console.log(error))
}
return (
<div>
<h1>Feedback</h1>
<button onClick={handleClick}>Post Cookie</button>
<button onClick={handleClickGet}>Get Cookie</button>
</div>
)
}
export default Feedback
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
网络选项卡:
应用程序选项卡:
我尝试了所有相关的帖子,并期望在应用程序选项卡而不是网络选项卡下看到cookie。我想使用此cookie并创建一个带有jwt令牌的登录系统。
1条答案
按热度按时间rta7y2nd1#
我在React(vite)上遇到了同样的问题。不要使用
http://127.0.0.1:5173/
访问前端。使用http://localhost:5173/
访问它。尽管两者都是相同的,但网页是从http://localhost:5173/加载的,并向http://127.0.0.1:5173/发出GET请求。因此,这是一个跨域请求,默认情况下,浏览器不会发送凭据(如Cookie和HTTP身份验证)。查看更多关于上一个问题:Can't get the cookie data from Go server with React