由于飞行前检查，React Redux 工具包 createAsyncThunk 无法正常工作

Question

当我发布到我的 API 时，POST 按预期工作，但飞行前的 OPTIONS 调用被拒绝并且完成的代码永远不会执行，即使 POST 成功了。

这是我的 API 调用和切片

export const executeTrade = createAsyncThunk(
  "general/executeTrade",
  async (trades, { getState }) => {

    const { general, positions } = getState();
    
    let assets = trades.map((trade) => {
      return {
        asset: trade.asset,
        qty: trade.total,
        price: trade.price,
      };
    });

    var data = {
      assets: assets,
      tradeType: general.tradeType,
      cash: positions.cashometer.cash,
      percent: general.tradePercent,
      exchange: general.selectedExchange,
    };

    const requestOptions = {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    };
    return await fetch(
      fetch("https://localhost:44357/api/Trade", requestOptions)
    ).then((res) => res.json());
  }
);

export const generalSlice = createSlice({
  name: "general",
  initialState: initialStateValue,
  reducers: {
    setTradeStatus: (state, action) => {
      state.tradeStatus = action.payload;
    },
    setTradeResult: (state, action) => {
      state.tradeResult = action.payload;
    },
  },
  extraReducers(builder) {
    builder
      .addCase(executeTrade.pending, (state, action) => {
        state.tradeStatus = "executing";
      })
      .addCase(executeTrade.fulfilled, (state, action) => {
        state.tradeStatus = "complete";
        state.tradeResult = action.payload;
      })
      .addCase(executeTrade.rejected, (state, action) => {
        console.log(action.error.message);
        state.tradeStatus = "error";
      });
  },
});

控制台输出显示 OPTIONS 和 POST 已成功调用，但 OPTIONS 正在触发被拒绝的案例

所以我要么需要执行以下操作之一，但不确定如何操作：

首先阻止 OPTIONS 请求
在 POST 成功完成后触发 fulfilled case
防止 OPTIONS 调用触发被拒绝的案例

非常感谢对此问题的任何帮助或见解

Answer 1

用 console.log(res) 代替你的 res.json();查看响应的内容。选项请求不会影响您的 redux 流程，您正在执行两次提取！！

export const executeTrade = createAsyncThunk(
  "general/executeTrade",
  async (trades, { getState }) => {
    ...
    const res = await fetch("https://localhost:44357/api/Trade", 
    requestOptions);
    console.log("RESPONSE:", res);
    const data = await res.json();
    return data;
  });

如果您需要完成请求，请不要等待。或者，如果您想等待它，请不要像承诺那样使用“.then”。阅读 this

由于飞行前检查，React Redux 工具包 createAsyncThunk 无法正常工作

React Redux toolkit createAsyncThunk not working due to pre-flight check

reactjs

redux-toolkit