我目前正在开发一个Web应用程序,我使用Axios与后端服务器进行通信。我正在使用Express服务器和会话来验证用户并保护某些路由。
当我使用Postman或Insomnia测试API端点时,我可以登录并访问受保护的路由,没有任何问题。然而,当我尝试从部署的React应用程序访问相同的受保护路由时,我得到了一个401 Unauthorized错误。
经过一些调试,我发现当我从React应用程序发出请求时,session对象是空的,req。isAuth在检查身份验证的中间件中未定义。
我怀疑Axios没有保存cookie,即使我添加了withCredentials:对Axios配置为true。
下面是一些相关的代码片段:
前端:
const api = axios.create({
baseURL: API_BASE_URL,
withCredentials: true,
});
后端:
const sessionOptions = {
secret: tokenSecret,
keys: [tokenSecret],
resave: false,
saveUninitialized: false,
cookie: {
secure: true,
httpOnly: true,
sameSite: 'none',
maxAge: 3600000,
},
};
app.use(session(sessionOptions));
app.use(morgan('dev'));
const corsOptions = {
credentials: true,
origin: NODE_ENV === 'production' ? PRO_URL : LOCAL_URL,
};
app.use(cors(corsOptions));
我还尝试将app.set('trust proxy', 1)
添加到后端服务器,但它没有解决这个问题。(但我认为通过Axios React应用程序只允许我访问受保护的路由一次)
如何解决此问题并确保Axios正确保存Cookie?任何帮助将不胜感激!
1条答案
按热度按时间nxowjjhe1#
我已经经历过这个,我相信我在这里看到过类似的东西,在这个例子中,我验证了API中已经定义了
withCredentials: true
的请求发送相同域的请求,所以问题可能在定义你的API中,请尝试创建只包含baseURL的API,并在请求中传递withCredentials: true
。