if (process.env.NODE_ENV !== 'production') {
require('dotenv').config();
}
// Libraries:
const express = require('express');
const app = express(); //
const mongoose = require('mongoose');
const cookieParser = require('cookie-parser');
const jwt = require('jsonwebtoken');
const cors = require('cors');
// Models:
const User = require('./models/users');
// Environment variables:
const jwtSecret = process.env.JWT_SECRET;
const dbUrl = process.env.DB_URL || 'mongodb://0.0.0.0:27017/chatapp';
// Database connection
mongoose.connect(dbUrl)
.then(() => {
console.log("Database Connected");
})
.catch(err => {
console.log("MONGO CONNECTION ERROR!!!");
console.log(err);
})
//
const corsOption = {
origin: ['http://localhost:3001'],
credentials: true,
methods: ["GET", "POST", "PUT", "DELETE"],
}
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(cookieParser());
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.header('Access-Control-Allow-Headers', '*');
res.header('Access-Control-Allow-Credentials', 'true');
next();
});
app.use(cors());
// app.use(cors());
// Routes
app.get("/", (req, res) => {
res.send('Hi');
});
app.get('/profile', (req, res) => {
const token = req.cookies?.token;
console.log(req.cookies);
if (token) {
jwt.verify(token, jwtSecret, {}, (err, userData) => {
if (err) {
console.log(err);
return res.status(401).json("Token verification failed");
};
// console.log(userData);
res.json(userData);
console.log(userData);
});
} else {
res.status(401).json("no token");
console.log('No token');
}
});
app.post('/register', async (req, res) => {
// console.log(req.body);
const { username, email, password } = req.body;
console.log(username, email, password);
try {
const registeredUser = await User.create({ username, email, password });
jwt.sign({ userId: registeredUser._id, username }, jwtSecret, {}, (err, token) => {
if (err) throw err; // show only message in the production
res.cookie('token', token, { sameSite: 'none', secure: true }).status(201).json({
id: registeredUser._id,
});
});
} catch (err) {
if (err) throw err;
res.status(500).json('error');
// console.log(err);
}
});
app.listen(3001, () => {
console.log("Serving on port 3001!");
})
字符串
这是服务器端App.js的代码
import { useState } from 'react'
import Body from './components/Body'
import axios from 'axios';
import { UserContextProvider } from './contexts/UserContext';
function App() {
axios.defaults.baseURL = 'http://localhost:3001';
// axios.defaults.withCredentials = true; // so that we can set cookies from our api
return (
<UserContextProvider>
<Body/>
</UserContextProvider>
)
}
export default App
型
这是客户端的App.jsx
import { useContext } from 'react';
import Register from './Register';
import { userContext } from '../contexts/UserContext';
const Body = () => {
const { username, id } = useContext(userContext);
if(username){
return 'loged in!';
}
return (
<Register />
);
};
export default Body;
型
客户端Body.jsx的代码
import React, { useContext, useState } from 'react';
import axios from 'axios';
import { userContext } from '../contexts/UserContext';
const Register = () => {
const [state, setState] = useState({
username: "",
email: "",
password: "",
});
const { setUsername, setId, setCookie } = useContext(userContext);
const handleChange = (e) => {
const value = e.target.value;
setState({
...state,
[e.target.name]: value
});
};
const handleRegistration = async (e) => {
e.preventDefault();
const userData = {
username: state.username,
email: state.email,
password: state.password,
};
// console.log(userData);
await axios.post("/register", userData, {
headers: {
'Content-Type': 'application/json'
}
})
.then((response) => {
// console.log(response);
// console.log(data.id);
setUsername(state.username);
setId(response.data.id);
// this.props.history.push(from.pathname)
})
.catch((error) => {
console.log(error);
});
// console.log(username, email, password);
};
return (
<div className='d-flex flex-column align-items-center justify-content-center' >
<div className='' style={{ width: "50%", marginTop: "10%" }}>
<h1 className='mb-3'>Register</h1>
<form className="" onSubmit={handleRegistration} noValidate>
<div className="mb-3">
<label className="form-label" htmlFor="username">Username</label>
<input className="form-control" type="text" id="username" name="username" value={state.username} onChange={handleChange} required />
</div>
<div className="mb-3">
<label className="form-label" htmlFor="email">Email</label>
<input className="form-control" type="email" id="email" name="email" value={state.email} onChange={handleChange} required />
</div>
<div className="mb-3">
<label className="form-label" htmlFor="password">Password</label>
<input className="form-control" type="password" id="password" name="password" value={state.password} onChange={handleChange} required />
</div>
<button type='submit' className="btn btn-success w-100">Register</button>
</form>
</div>
</div>
)
}
export default Register;
型
在客户端注册.jsx代码
import { createContext, useEffect, useState } from 'react';
import axios from 'axios';
export const userContext = createContext({});
export const UserContextProvider = ({ children }) => {
const [username, setUsername] = useState(null);
const [id, setId] = useState(null);
// const [cookie, setCookie] = useState(null);
useEffect(() => {
// const fetchData = async () => {
axios({
method: 'get',
url: '/profile',
})
.then(response => {
// Handle the response
console.log(response.data);
})
.catch(error => {
// Handle errors
console.error(error);
});
}, []);
return (
<userContext.Provider value={{ username, setUsername, id, setId }}>
{children}
</userContext.Provider>
)
}
型
客户端UserContext.jsx代码
我成功地能够注册新用户,但当我试图访问userData使用获取请求'http://localhost:3001/profile'。
客户端无法将cookie沿着get请求发送到服务器端,因此我收到错误:“加载资源失败:服务器响应的状态为401(未经授权)”
Axios错误:
{
"message": "Request failed with status code 401",
"name": "AxiosError",
"stack": "AxiosError: Request failed with status code 401\n at settle (http://localhost:5173/node_modules/.vite/deps/axios.js?v=034a35d4:1204:12)\n at XMLHttpRequest.onloadend (http://localhost:5173/node_modules/.vite/deps/axios.js?v=034a35d4:1421:7)",
"config": {
"transitional": {
"silentJSONParsing": true,
"forcedJSONParsing": true,
"clarifyTimeoutError": false
},
"adapter": [
"xhr",
"http"
],
"transformRequest": [
null
],
"transformResponse": [
null
],
"timeout": 0,
"xsrfCookieName": "XSRF-TOKEN",
"xsrfHeaderName": "X-XSRF-TOKEN",
"maxContentLength": -1,
"maxBodyLength": -1,
"env": {},
"headers": {
"Accept": "application/json, text/plain, */*"
},
"baseURL": "http://localhost:3001",
"method": "get",
"url": "/profile"
},
"code": "ERR_BAD_REQUEST",
"status": 401
}
型
我试图通过get request获取用户数据,但在发出请求时,客户端没有向服务器端发送任何cookie,因此请求未被授权。
1条答案
按热度按时间64jmpszr1#
我认为你的cookies没有被发送到客户端,因为axios没有发送它们。你是想注解掉这行吗?
字符串