Redux Toolkit - GET从不调用，OPTIONS从不返回

Redux Toolkit 是一个官方推荐的用于简化 Redux 开发的工具集。它提供了一些工具函数和最佳实践，以减少样板代码并提高开发效率。当你遇到 GET 请求从不调用，OPTIONS 请求从不返回的问题时，可能是由于以下几个原因：

基础概念

Redux Toolkit: 是 Redux 的官方工具集，旨在简化 Redux 的使用。
GET 请求: 用于请求服务器发送数据。
OPTIONS 请求: 是一个预检请求，用于确定实际请求是否安全可接受。

可能的原因

CORS 问题: 浏览器出于安全考虑，会先发送一个 OPTIONS 请求来询问服务器是否允许该跨域请求。
中间件配置问题: Redux Toolkit 使用中间件来处理异步操作，如 Redux Thunk 或 Redux Saga。
API 端点问题: 可能是 API 端点配置错误或服务器端没有正确处理请求。

解决方法

检查 CORS 配置: 确保服务器端正确配置了 CORS，允许来自你的前端应用的请求。例如，在 Node.js 中可以使用 cors 中间件：
检查 CORS 配置: 确保服务器端正确配置了 CORS，允许来自你的前端应用的请求。例如，在 Node.js 中可以使用 cors 中间件：
检查中间件配置: 确保在 Redux store 中正确配置了处理异步操作的中间件，例如 Redux Thunk：
检查中间件配置: 确保在 Redux store 中正确配置了处理异步操作的中间件，例如 Redux Thunk：
检查 API 端点: 确保你的 API 端点是正确的，并且服务器端能够正确处理 GET 请求。例如：
检查 API 端点: 确保你的 API 端点是正确的，并且服务器端能够正确处理 GET 请求。例如：
调试工具: 使用浏览器的开发者工具来检查网络请求，查看 OPTIONS 和 GET 请求的状态码和响应内容。

示例代码

以下是一个简单的示例，展示如何在 Redux Toolkit 中处理异步 GET 请求：

// store.js
import { configureStore } from '@reduxjs/toolkit';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = configureStore({
  reducer: rootReducer,
  middleware: [...getDefaultMiddleware(), thunk],
});

export default store;

// actions.js
export const fetchData = () => async (dispatch) => {
  dispatch({ type: 'FETCH_DATA_REQUEST' });
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
  } catch (error) {
    dispatch({ type: 'FETCH_DATA_FAILURE', error });
  }
};

// reducers.js
const initialState = {
  data: [],
  loading: false,
  error: null,
};

const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DATA_REQUEST':
      return { ...state, loading: true };
    case 'FETCH_DATA_SUCCESS':
      return { ...state, loading: false, data: action.payload };
    case 'FETCH_DATA_FAILURE':
      return { ...state, loading: false, error: action.error };
    default:
      return state;
  }
};

export default dataReducer;