为什么axios.get(URL)返回不一致？

Question

我无法理解为什么

axios.get(...url...)

请求并不总是向前端返回结果。

工作不一致的代码（平均每隔一个请求返回一个结果）如下：

async function subscribeToAnalysis (analysisId) {

    await axios.get(/localhost:8000/someEndpoint/), {
        timeout: 50000,
    })
    .then(async response => {
        console.log("Response", response);
        // Do more stuff with response and recall the function to subscribe again
    };
}

但是，如果我将

axios.get(...)

替换为

fetch(...)

请求，它会按预期工作，并且每次都会按预期返回结果。

async function subscribeToAnalysis (analysisId) {

    await fetch(/localhost:8000/someEndpoint/))
    .then(async response => {
        console.log("Response", response);
        // Do more stuff with response and recall the function to subscribe again
    };
}

当发送回 Django Rest

axios.get(...)

对象或

Response

对象时，

HttpResponse

请求在后端工作正常。在我的用例中，我使用 Django Channels，因此我必须显式发送标头，然后发送内容。

例如，我通过以下方式发送标头：

await self.send_headers(headers=[
            (b"Content-type", b"application/json"),
            (b"Access-Control-Allow-Origin", b"*"),
            (b"Allow", b"GET"),
            (b"Access-Control-Allow-Credentials", b"true"),
            (b"Cross-Origin-Opener-Policy", b"same-origin"),
            (b"Referrer-Policy", b"same-origin"),
            (b"Access-Control-Allow-Headers", b"Origin, X-Requested-With, Content-Type, Content-Length, Accept, Authorization"),])             

然后，通过以下方式发送订阅请求的内容：

await self.send_body(bytes(json.dumps(analysisData), 'utf-8'))

同样的代码适用于

fetch()

请求，但不适用于

axios.get()

请求，我不确定为什么。

Answer 1

在使用 Django Channels 的设置中，

axios.get

不一致返回结果的问题可能是由于几个因素造成的，特别是

axios

和

fetch

在某些条件下以不同方式处理 HTTP 请求和响应。以下是一些可能的原因和解决方案：

HTTP 标头处理

axios

和

fetch

处理 HTTP 标头的方式可能略有不同，尤其是在涉及 CORS（跨源资源共享）标头或凭证 cookie 时。由于您的设置涉及 Django Channels 并且您已显式设置标头，因此

axios

可能需要额外的配置才能正确处理这些标头。

解决方案：

• 确保

  axios

  配置为接受所有相关标头并在需要时发送凭据。如果您的应用程序需要在每个请求上发送自定义标头，您可以配置标头的全局

  axios

  默认值。

超时处理

您已在

timeout

请求中将

axios

设置为 50000 毫秒（50 秒）。这通常没问题，但如果您的服务器端操作（分析部分）有时需要更长的时间或者连接很慢，这可能会导致某些请求超时，但其他请求不会超时。

解决方案：

• 调查服务器端操作的响应时间，以确保它们适合超时窗口。您可能需要根据您的发现调整超时值。

错误处理

您当前的

axios

代码片段不包含错误处理，这意味着如果发生错误（例如网络错误、超时或5XX服务器错误），则不会记录或处理该错误。

解决方案：

• 将

  .catch()

  块添加到您的

  axios

  请求中以处理和记录错误。这可以更深入地了解某些请求失败的原因。

axios.get('/localhost:8000/someEndpoint/', { timeout: 50000 })
    .then(async response => {
        console.log("Response", response);
        // Do more stuff with response
    })
    .catch(error => {
        console.error("Request failed", error);
    });

axios版本

您使用的特定版本的

axios

可能存在问题或错误，这可能会影响 HTTP 请求的行为。

解决方案：

• 检查您是否使用最新版本的

  axios

  。如果没有，请在确保与您的应用程序兼容后考虑升级到最新版本。

使用 HTTP 和 HTTPS 进行测试

如果您的本地开发环境与生产环境不同（例如，本地 HTTP 和生产中的 HTTPS），则可能存在影响请求发送方式或 Cookie 处理方式的安全策略。

解决方案：

• 在与生产密切相关的环境中测试您的应用程序，尤其是在 HTTP/HTTPS 使用方面，以识别任何特定于环境的问题。

最后注意事项

鉴于

fetch

每次都按预期工作，这表明问题可能与

axios

的配置方式或其与服务器响应的交互方式有关。仔细检查和调整

axios

的配置并更稳健地处理错误场景应该有助于解决您遇到的不一致问题。