我正在尝试在我的Mern Stack应用中进行登录,从背面看来,一切都很好,从正面也是如此,问题是,如果我尝试登录,它表示CORS政策存在问题。如果我将cors软件包添加到服务器,服务器将不会加载数据。
这是前面的部分
constructor(props){
super(props);
this.state = {
userName: '',
password: ''
};
}
handleInputChange = (event) => {
const {value, name} = event.target;
this.setState({
[name]: value
});
};
onSubmit = event => {
event.preventDefault();
fetch('http://localhost:5000/api/users/authenticate', {
method: 'POST',
body: JSON.stringify(this.state),
headers: {
'Content-Type': 'application/json'
}
}).then(res=>{
if (res.status === 200) {
console.log('hello world');
this.props.history.push('/');
}else{
const error = new Error(res.error);
throw error
}
}).catch(err => {
console.error(err);
})
};
这是后面的部分
router.post('/authenticate', (req, res) => {
const { userName, password } = req.body;
if (!userName || !password) {
let msg = "Username or password missing!";
console.error(msg);
res.status(401).json({msg: msg});
return;
}
User.findOne({ userName })
.then(user => {
bcrypt.compare(password, user.password)
.then(isMatch => {
if(!isMatch) return res.status(400).json({ msg: 'Wrong password' });
jwt.sign(
{ id: user.id },
config.get('jwtSecret'),
{ expiresIn: 3600 },
(err, token) => {
if(err) throw err;
res.json({token, user: {
id: user.id,
userName: user.userName
}
});
}
)
})
})
});
基本结果就是能够登录并删除与cors政策有关的所有问题。感谢您的所有建议!
答案 0 :(得分:0)
很可能您尚未将服务器设置为使用cors
软件包
const cors = require('cors');
const app = express();
app.use(cors());
答案 1 :(得分:0)
在您的index.js文件中,
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors({
origin:'http://localhost:4200',//development server
optionsSuccessStatus: 200
}));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static(__dirname+ '/client/dist/client'));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname+ '/client/dist/client/index.html'));
});
app.listen(5000, ()=>{
console.log("server is running");
});
使用const router = express.Router();
答案 2 :(得分:0)
您可以简单地:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "*");
next();
});