在 axios 发布请求后使用 express 进行重定向
Posted
技术标签:
【中文标题】在 axios 发布请求后使用 express 进行重定向【英文标题】:Making redirects after an axios post request with express 【发布时间】:2018-09-11 02:39:22 【问题描述】:在接受来自 Axios 的发布请求后,我无法让重定向工作。我确实知道该请求正在发送,并且它至少从“/”路由中获得了一些响应,因为我的控制台记录了“索引”、“用户验证”,这是当有人向“/”发出获取请求时应该发生的情况'。问题是页面无法加载。我什至在谷歌浏览器的网络选项卡中看到 index.js 已加载,但无论我尝试什么,页面都不会改变!这有什么原因吗?
我所做的其他重定向似乎确实有效。例如,如果用户未登录,索引页面将重新路由到 /login。这似乎只是发布请求的问题,我已经在使用和不使用护照身份验证的情况下对其进行了测试(显然更改为您需要登录在重定向),这是相同的结果。所以我不认为护照是造成问题的原因。
你可以参考下面的package.json看看我在用什么
axios 代码:
axios.post('/login', username: username, password: password)
/*.then(response => res.redirect('/'))*/
.then(function (response)
console.log(response);
)
.catch(function(error)
console.log(error);
)
快递方面:我有控制台日志在测试期间提醒自己
server.get('/', (req,res) =>
console.log("Index");
if (req.user)
console.log("user verified");
res.redirect('/');
app.render(req,res, '/',req.query);
else
console.log("user not logged in");
res.redirect('/login');
)
server.post('/login', passport.authenticate('local'), (req, res, next) =>
if (req.user)
console.log("Logging in");
res.redirect('/');
else
console.log("Passwrod Incorrect");
return res.redirect('/login');
)
package.json
"name": "layout-component",
"version": "1.0.0",
"scripts":
"dev": "node ./server.js",
"build": "next build",
"start": "NODE_ENV=production node ./server.js"
,
"dependencies":
"@zeit/next-css": "^0.1.5",
"axios": "^0.18.0",
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.2",
"connect-flash": "^0.1.1",
"connect-mongo": "^2.0.1",
"cookie-parser": "^1.4.3",
"express": "^4.16.3",
"express-session": "^1.15.6",
"express-validator": "^5.1.0",
"file-loader": "^1.1.11",
"hoist-non-react-statics": "^2.5.0",
"jsonwebtoken": "^8.2.0",
"mongodb": "^3.0.5",
"mongoose": "^5.0.12",
"next": "^5.1.0",
"passport": "^0.4.0",
"passport-local": "^1.0.0",
"prop-types": "^15.6.1",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"semantic-ui-css": "^2.3.1",
"semantic-ui-react": "^0.79.0",
"url-loader": "^1.0.1"
,
"license": "ISC"
【问题讨论】:
我假设您正在使用 axios 对服务器进行 ajax 调用。在默认情况下,可能不会考虑来自服务器的 ajax 重定向响应,就像正常的浏览器请求一样。最好向客户端发送 401 响应 json 并从客户端重定向。 我认为我根本没有使用 Ajax。我只是在使用acios 不确定我是否在使用 Ajax。除非 axios 使用它。你能告诉我你的意思吗? 在过去的一天里,我已经解决了这个问题超过 5 个小时,但我无法让它按照应有的方式正常工作。我不确定发布请求是否未正确发送,或者我是否正确接收。我可以 console.log 并查看正在发送的数据(可以打印用户名和密码),还可以看到它尝试重定向索引,甚至从它重定向到的索引页面加载日志记录。浏览器什么都不做。 哦。我的 axios 配置是完全默认的。我没有设置任何东西。只需 yarn add axious 并编写 post 函数。我应该写一个配置吗? 【参考方案1】:我后来想通了。显然,当您发出 Axios 发布请求时,您无法从服务器进行重定向。至少不是我这样做的方式(使用默认的 Axios 配置)。您需要在客户端进行页面更改。这就是我的做法。
这真的让我很难过,因为我使用另一种方法从我的重定向路由接收数据,但页面没有加载。
此外,由于某种原因,使用 Next.js,passport.js “successRedirect”和“failureRedirect”JSON 似乎不起作用。这就是为什么我按照我的方式编写路由并且没有将它们包含在 passport.authenticate() 函数中。我希望这对某人有帮助!
我的axios提交功能:
onSubmit = (e) =>
e.preventDefault()
const username, password = this.state;
axios.post('/login', username: username, password: password)
.then(function (response)
if (response.data.redirect == '/')
window.location = "/index"
else if (response.data.redirect == '/login')
window.location = "/login"
)
.catch(function(error)
window.location = "/login"
)
我的 Express 服务器中的 post 请求
server.post('/login', passport.authenticate('local'), (req, res, next) =>
if (req.user)
var redir = redirect: "/" ;
return res.json(redir);
else
var redir = redirect: '/login';
return res.json(redir);
)
【讨论】:
这是可行的,但问题是,页面每次都在刷新 相同。页面每次都在刷新。解决方案是什么?【参考方案2】:虽然它不会是服务器端重定向,但这可以在客户端使用 Axios 的“拦截器”干净地完成,它可以在请求或响应传递到 then
/catch
之前拦截它们:
// Add a request interceptor
axios.interceptors.request.use(function (config)
// Do something before request is sent
return config;
, function (error)
// Do something with request error
return Promise.reject(error);
);
// Add a response interceptor
axios.interceptors.response.use(function (response)
// Do something with response data
return response;
, function (error)
// Do something with response error
return Promise.reject(error);
);
https://github.com/axios/axios#interceptors
【讨论】:
如何将用户重定向到这里?如果您在返回Promise.reject(error)
之前重定向,则会收到 onunhandledrejection
错误。
就我而言,我只是想手动重定向到错误页面,因此我执行了以下操作: axiosAPI.interceptors.response.use(response => return response; , error => console.error('axios error:', error); if (error.response.status === 401) window.location = '/error'; return Promise.reject(error); );跨度>
以上是关于在 axios 发布请求后使用 express 进行重定向的主要内容,如果未能解决你的问题,请参考以下文章
在 Express.js 上使用 Axios 向 Spotify API 发出 POST 请求时出现错误 400