When I'm posting to my API, the POST works as intended but the pre-flight OPTIONS call is rejected and the fulfilled code never gets executed even though the POST was successful.

This is my API call and slice

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";
      });
  },
});

Console output showing that OPTIONS and POST are being successfully called but OPTIONS is triggering the rejected case

So I either need to do one of the following, but not sure how:

1. Prevent the OPTIONS request in the 1st place
2. Trigger the fulfilled case after the POST completes successfully
3. Prevent the OPTIONS call from triggering the rejected case

Any help or insight to this problem is greatly appreciated

CodePudding user response：

put a console.log(res) instead of your res.json(); to see what is coming from the response. The options request won't affect your redux flow, you are doing two fetchs!!

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;
  });

And if you need to fulfill the request, don't await it. or if you want to await it dont use ".then" like a promise. Read this