使用 Axios (React) 和 Django RestFramework 的奇怪行为 - 第一次尝试网络错误第二次尝试成功

Question

在使用 Axios (React) 和 rest api (DRF) 时，我遇到了一个非常烦人且难以调试的问题。

当我第一次尝试发出请求（主要是 POST）时，函数失败并打印 Err 返回：

错误：网络错误 在 createError (createError.js:16) 在 XMLHttpRequest.handleError (xhr.js:117)

我可以看到它指向未提供大量反馈的 createError；可能是网络问题（不太可能）或 CORS；我的 axios 实例是这样的。我的标题中是否遗漏了一些重要的内容？

export const axiosInstance = axios.create({
    baseURL: baseUrl,
    timeout: 1000,
    headers: {

        Authorization: localStorage.getItem('access_token')
        ? 'JWT' + localStorage.getItem('access_token')
        : null,
        'Content-Type': 'application/json',
        accept: 'application/json',
    },
});

我理解这个问题可能与网络相关或与 CORS 相关，但奇怪的是（无论如何对我来说）它允许第二次或第三次尝试连接。完全一样（只需单击按钮），一旦成功到达端点，它将在一段时间后继续第一次；好像它需要“醒来”。

如果这是 CORS 的问题，它每次都会阻止尝试，肯定吗？不管怎样，我在 DRF 设置中确实有 Cors 中间件，它是列表中的第一项以及已安装的应用程序中的第一项。网址也在CORS_ALLOWED_ORIGINS 中。所以我的设置看起来不错；我之前也多次使用过这个配置，所以我知道它可以工作，而且请求在多次尝试后通过。

我还在 Azure 上托管，它具有内置的 CORS 保护功能；我也通过使用 * 允许了所有主机（是的，我将添加 url，但是一旦我到达了这个底部）。

我可能可以通过在 Axios 中使用某种重试方法来解决它，但我想/需要知道为什么它第一次失败，因为必须重试端点似乎并不理想。

这是我对axios.create的用法/实现

 axiosInstance
                .post('/accounts/login/', {
              email: formData.email,
              password: formData.password,})

          .then((res) => {
              localStorage.setItem('access token', res.data.access);
              localStorage.setItem('refresh token', res.data.refresh);
              history.push('/targetnda');})
          .catch(err => {
            console.log('here', err)
            const resp = err.response.data
           // data undefined because obviously there is no response. Error returns Network error})

与..

export const axiosInstance = axios.create({
    baseURL: baseUrl,
    timeout: 1000,
    headers: {

        Authorization: localStorage.getItem('access_token')
        ? 'JWT' + localStorage.getItem('access_token')
        : null,
        'Content-Type': 'application/json',
        accept: 'application/json',
    },
});

感谢您的耐心和阅读；请善待我的 React 代码（新手）=/

Answer 1

从axios.create 中删除timeout。它会解决你的问题。