Axios 帖子在 Chrome (CORS) 中停滞不前答案

【问题标题】：Axios post stalled in Chrome (CORS)Axios 帖子在 Chrome (CORS) 中停滞不前
【发布时间】：2020-04-04 20:43:06
【问题描述】：

我正在转换将 AWS Lambda 连接到 nanoexpress 的代码。我的 VueJS 前端没有正确传递数据，所以我开始进行更改，现在我根本无法到达后端，我不知道为什么。

后端很简单：

const nanoexpress = require('nanoexpress');
const app = nanoexpress();
app.post('/v1/authorizeUser', async (req) => {
    console.log(req);
    const { email, password } = req.body;
    console.log(email);
    return { status: 'Ok', body: req.body };
});   
app.listen(3000).then(r => console.log('started'));

这是原始的 store.js 代码。我可以在 Chrome 中从 Vue 应用程序发送请求，但解析不正确。可能是因为缺少或不正确的内容类型

const axiosResponse = await axios.post(`${API_ENDPOINT}/authorizeUser`, JSON.stringify({
  email: payload.email,
  password: payload.password,
}));

和服务器日志：

body: [Object: null prototype] {
 '{"email":"literak@seznam.cz","password":"centrum"}': ''
}
undefined

当我添加 Axios 选项时，chrome 显示此请求的错误，但服务器上没有任何内容。

 const options = {
   headers: {
     'Content-Type': 'application/json',
   },
 };
 const axiosResponse = await axios.post(`${API_ENDPOINT}/authorizeUser`, JSON.stringify({
    email: payload.email,
    password: payload.password,
 }), options);

Chrome 请求看起来很奇怪，没有响应部分，请求标头非常不同，我可以在 Timing 选项卡中看到请求停止。

如果我删除 stringify 函数，它的行为是一样的：

const axiosResponse = await axios.post(`${API_ENDPOINT}/authorizeUser`, {
   email: payload.email,
   password: payload.password,
}, options);

没有字符串化和自定义选项也有同样的麻烦：

const axiosResponse = await axios.post(`${API_ENDPOINT}/authorizeUser`, {
   email: payload.email,
   password: payload.password,
}, options);

只有第一个带有 stringify 且不带选项的变体到达服务器。我使用 Postman 请求由服务器处理。

日志：

  body: { email: 'literak@seznam.cz', password: 'centrum' }
}
literak@seznam.cz

Axios 是最新的 0.19.2 版本。 Chrome 也是最新的。我不知道为什么其他组合无法到达服务器。看起来 Chrome 收到了正确的请求。有什么问题？它让我发疯。

更新：控制台

Error: Network Error
    at createError (createError.js?2d83:16)
    at XMLHttpRequest.handleError (xhr.js?b50d:83)

【问题讨论】：

这听起来很像 CORS 预检失败。最新版本的 Chrome 不会在“网络”选项卡中显示 OPTIONS 请求，但您仍应在控制台中收到明确的错误消息。 Firefox 将显示 OPTIONS 请求，因此您可能会更幸运。
如果您的后端与前端位于不同的域/端口上，如果未明确允许，它可能会因 CORS 而被阻止。
我已经用控制台日志更新了问题。后端未配置为检查 CORS。
第一个变体仍然使用 CORS（您可以在请求标头中看到），但它不需要预检，因为它使用 application/x-www-form-urlencoded 作为其 Content-Type。第二个请求使用application/json，它会触发预检。
出于安全原因，浏览器在客户端（而非后端）检查来源。

标签： javascript google-chrome vue.js axios nanoexpress

【解决方案1】：

nanoexpress 中的 CORS 显然是 known bug:

const corsPerRoute = cors();
app.options('/my-route', corsPerRoute, () => {});

app.get('/my-route', corsPerRoute, (req, res) => {
  res.send('this route protected by your cors per-route config');
});

【讨论】：