MirageJs:如果使用passthrough调用api，则无法使用axios

Question

我在react中有一个应用程序，里面有一个切片和一个thunk。我使用@reduxjs/工具包，用"createSlice“api创建slice，用"createAsyncThunk”创建thunk。

我的想法是：

export const loginThunk = createAsyncThunk('login/local', async (loginData: LoginData) => {

    const {username, password} = loginData;
    
    const l = await axios.post(`${BASE_URL}_login/local`, {username, password}, {
        headers: {'Content-Type': 'application/json'}
    })
    return l.data;
})

在我的应用程序中，运行一个带有模拟api的幻影服务器，并在我的真实服务器上运行一个"passthrough“。

当我发送"loginThunk“thunk时，它会在我的reducer中运行"loginThunk.pending”并停止。

它永远不会实现或被拒绝。

如果我发送"loginThunk“推送，没有运行mirage服务器，它就能工作。

如果我在没有运行mirage服务器的情况下发送"loginThunk“消息，但我使用"fetch”而不是axios，它可以工作。

这似乎是axios和mirageJs通过之间的问题。

有什么想法吗？

非常感谢

Answer 1

事实证明，问题源于Axios0.21.2中更改的xhr适配器。处理程序request.onreadystatechange不再添加到请求中(当您启动mirageJS服务器时，似乎重新定义了XMLHttpRequest)。

解决方案是创建您自己的适配器-基本上是复制lib/adapters/xhr.js并确保通过if语句的else分支-并在您的axios配置中使用它。

Answer 2

我修复了将axios降级到0.21.0的问题，并使用miragejs：0.1.41、0.1.42.0、0.1.43.0