RTK 查询错误返回我自己的 html 而不是 API 响应

Question

在我的项目中，我使用 Redux Toolkit Query 从 API 获取数据。当我在我的组件上使用它时，它会给我 PARSIN_ERROR，因为它返回我自己的 html 基本模板，而不是 API 响应...
这是我的服务代码。

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

const cryptoApiHeaders = {
  'X-RapidAPI-Key': process.env.CRYPTO_API_KEY,
  'X-RapidAPI-Host': process.env.CRYPTO_API_HOST,
};

const createRequest = (url) => ({
  url,
  headers: cryptoApiHeaders,
});

export const CryptoApi = createApi({
  reducerPath: 'CryptoApi',
  baseQuery: fetchBaseQuery({ baseUrl: process.env.CRYPTO_API_URL }),
  endpoints: (builder) => ({
    getCryptos: builder.query({
      query: (count) => createRequest(`/coins?limit=${count}`),
    }),
    getCryptoById: builder.query({
      query: (coin_uuid) => createRequest(`/coin/${coin_uuid}`),
    })
  })
});

export const {
  useGetCryptosQuery,
  useGetCryptoByIdQuery
} = CryptoApi

这是我的商店代码。

import { configureStore } from "@reduxjs/toolkit"

import { CryptoApi } from "../Services/CryptoApi"

export const store = configureStore({
  reducer: {
    [CryptoApi.reducerPath]: CryptoApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(CryptoApi.middleware),
})

这里我注入了Provider。

import { store } from './app/store'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}>
        <App />
      </Provider>
    </BrowserRouter>
  </React.StrictMode>
);

这是我在组件中调用它的地方

import { useGetCryptosQuery } from '../Services/CryptoApi';

const Home = () => {

  const { data, error, isLoading } = useGetCryptosQuery(10);

  return (
    <>
      {
        error ? (
            console.error(error.error)
          )
        :
        isLoading ? (
          console.log(isLoading)
        )
        :
        data ? (
          console.log('Passed: ', data)
        ) : null
      }
    </>
  )
}

export default Home;

这就是回应

正如你所看到的，它在错误中返回我自己的html模板...我整天都在处理这个问题，但不知道如何解决它...

OBS：所有 env 属性的格式均正确。

Answer 1

我在使用 Redux Toolkit Query 的 React 应用程序中遇到了同样的解析错误。我使用 Vite 创建了我的应用程序，并且必须将服务器选项添加到 vite.config.js 文件中。您可以在其文档中阅读有关服务器选项的更多信息：https://vitejs.dev/config/server-options。 就我而言，我正在使用本地主机并为我的后端使用代理。因此，为了让 API 请求正常工作，我的 vite.config.js 代码如下所示：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    proxy: {
      "/api": "http://localhost:3000"
    }
  },
  plugins: [react()],
})