我有一个在MEVN堆栈中构建的项目,可以在本地正常工作,我在Heroku成功部署了我的后端,我用Postman测试了它,一切都工作得很好,但当我尝试用我的客户端(本地)登录时,我有一个“GET https://invoicing-wmb.herokuapp.com/api/user 401(未经授权)"。
此外,我已经用console.log(“”)进行了测试,代码一直工作到User:
const claims = jwt.verify(cookie, 'secret')
注意:唯一不起作用的是用户auth,其他一切都工作正常。
这是后端的mi index.js。
const express = require('express')
const mongoose = require('mongoose')
const cors = require('cors')
const cookieParser = require('cookie-parser')
mongoose.set('useCreateIndex', true)
mongoose.connect('mongodb+srv://markselin:PASSWORD123@cluster0.uaau3.mongodb.net/myFirstDatabase?retryWrites=true&w=majority', {
useNewUrlParser: true,
useUnifiedTopology: true,
useCreateIndex: true
}, () => {
console.log('connected to the database')
})
const routes = require('./routes/routes')
app = express()
app.use(cookieParser())
app.use(cors({
credentials: true,
origin: ['https://invoicing-wmb.herokuapp.com', 'http://localhost:8080'] //CLOUD
}))
app.use(express.json())
app.use('/api', routes)
//testing main /
app.get('/', function(peticion, respuesta){
respuesta.send('WECOME TO OUR API [WBM]')
})
app.get('/api', function(peticion, respuesta){
respuesta.send('INVOICING API [WMB]')
})
app.listen(process.env.PORT || 8000)
这是我在router.js中的用户
router.get('/user', async (req, res) => {
try {
const cookie = req.cookies['jwt']
const claims = jwt.verify(cookie, 'secret')
if (!claims) {
res.send({message:'NO AUTENTICADO'})
}
const user = await User.findOne({_id: claims._id})
const {pass, ...data} = await user.toJSON()
console.log('AUTENTICADO'+data)
res.json(data)
} catch (e) {
return res.status(401).send({
message: 'unauthenticated'
})
}
})
客户端中的登录方法
methods: {
async handleSubmit() {
try {
const respons = await axios.post("login", {
email: this.email,
pass: this.pass,
});
localStorage.setItem("token", respons.data.token);
const response = await axios.get("user");
this.$store.dispatch("user", response.data);
this.$router.push({name:'Inicio'})
} catch (e) {
console.log(e)
}
},
和axios.js
import axios from 'axios'
axios.defaults.baseURL = 'https://invoicing-wmb.herokuapp.com/api/' //CLOUD
axios.defaults.headers.common['Authorization'] = 'Bearer' + localStorage.getItem('token')
axios.defaults.withCredentials = true;
最后这是我尝试登录
时Heroku的日志
2条答案
按热度按时间n7taea2i1#
看起来你在使用cookie来保存用户的令牌。我猜是因为域混淆了,所以cookie没有被发送。当你在localhost上测试它时,你的前端和后端的域是一样的,所以cookie可以工作。当你在postman上测试时,你可能直接发送令牌。或者手动设置cookies,这样也能正常工作。一旦你进入浏览器,它会限制哪些cookies可以被哪些网站使用。
您需要检查您的cookie当前具有哪些属性。例如,是否使用了
secure
标志以及您是否使用了https连接?最重要的是,查看Same-Site
属性,因为在您的情况下,它应该设置为lax
或none
。另一个选项是在同一个域上运行前端和后端。gywdnpxw2#
请确保您已在Heroku启用ACM(自动证书管理)。您需要将应用更新到免费层以上才能启用。
这可能是你的问题,因为在Set-Cookie中使用“安全”不能在Heroku使用,除非你是通过https输入,这需要一个证书。
1.启用ACM
1.通过HTTPS连接
1.使用Chrome Dev Inspector的“网络”选项卡验证Cookie是否存在。
好好享受吧!