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

Question

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

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

Error: Network Error at createError (createError.js:16) at 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 相关，但奇怪的是（无论如何对我来说）是它允许在第二次或第三次尝试时建立连接。完全相同（只需单击按钮），一旦成功到达终点，一段时间后它将继续第一次这样做；好像它需要 'waking up'.

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

我也在 Azure 上托管，它具有内置的 CORS 保护功能；我也通过使用 * 允许所有主机在那里（是的，我将添加 urls 但一旦我深入了解）。

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

这是我的 usage/implementation 的 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。它会解决你的问题。

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

Strange behaviour using Axios (React) and Django RestFramework - Network Error on 1st attempt success on 2nd try

django-rest-framework

reactjs

azure-web-app-service

axios