在嘗試從 Rapidapi.com 訪問數據時，有沒有辦法克服 React 中的 401 未授權錯誤？

Question

我正面臨未經授權的 401 問題。盡了一切可能，因此將其與代碼和結果圖片一起發布在這里。 像這樣訪問時的數據可以毫無問題地檢索數據。

 var axios = require("axios").default; var options = { method: 'GET', url: 'https://coinranking1.p.rapidapi.com/stats', headers: { 'x-rapidapi-host': 'coinranking1.p.rapidapi.com', 'x-rapidapi-key': 'key' } }; axios.request(options).then(function (response) { console.log(response.data); }).catch(function (error) { console.error(error); });

但是當我嘗試通過代碼訪問它時，它沒有。 請看一下代碼。

索引.js

 import React from "react"; import ReactDom from "react-dom"; import { BrowserRouter as Router } from "react-router-dom"; import { Provider } from "react-redux"; import App from "./App"; import store from "./app/store"; import "antd/dist/antd.css"; ReactDom.render( <Router> <Provider store={store}> <App /> </Provider> </Router>, document.getElementById("root") );

CryptoApi.js

 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; const cryptoApiHeaders = { "x-rapidapi-host": "coinranking1.p.rapidapi.com", "x-rapidapi-key": "key", }; const baseUrl = "https://coinranking1.p.rapidapi.com"; const createRequest = (url) => ({ url, header: cryptoApiHeaders }); export const cryptoApi = createApi({ reducerPath: "cryptoApi", baseQuery: fetchBaseQuery({ baseUrl }), endpoints: (builder) => ({ getCryptos: builder.query({ query: () => createRequest("/coins"), }), }), }); export const { useGetCryptosQuery } = cryptoApi;

商店.js

 import { configureStore } from "@reduxjs/toolkit"; import { cryptoApi } from "../services/cryptoApi"; export default configureStore({ reducer: { [cryptoApi.reducerPath]: cryptoApi.reducer, }, });

首頁.jsx

 import React from "react"; import millify from "millify"; import { Typography, Row, Col, Statistic } from "antd"; import { Link } from "react-router-dom"; import { useGetCryptosQuery } from "../services/cryptoApi"; const { Title } = Typography; const Homepage = () => { const { data, isFetching } = useGetCryptosQuery(); console.log(data); return ( <> <Title level={2} className="heading"> Global Crypto Stats </Title> <Row> <Col span={12}> <Statistic title="Total Cryptocurrencies" value="5" /> <Statistic title="Total Exchanges" value="5" /> <Statistic title="Total Market Cap" value="5" /> <Statistic title="Total 24h Voulume" value="5" /> <Statistic title="Total Markets" value="5" /> </Col> </Row> </> ); }; export default Homepage;

控制台錯誤：

謝謝你。

Answer 1

挺有意思的，我相信你已經訂閱了API。一般情況下，410代碼表示沒有認證。

你可以在 CryptoApi.js 文件中試試這個

 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; const cryptoApiHeaders = { "x-rapidapi-host": "coinranking1.p.rapidapi.com", "x-rapidapi-key": "key", }; const baseUrl = "https://coinranking1.p.rapidapi.com/stats"; const createRequest = (url) => ({ url, header: cryptoApiHeaders }); export const cryptoApi = createApi({ reducerPath: "cryptoApi", baseQuery: fetchBaseQuery({ baseUrl }), endpoints: (builder) => ({ getCryptos: builder.query({ query: () => createRequest("/coins"), }), }), }); export const { useGetCryptosQuery } = cryptoApi;

如果它仍然不起作用，您可以隨時通過 support@rapidapi.com 聯系 RapidAPI 支持團隊

Answer 2

在你的 CryptoApi.js 文件中，有一個錯字

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

應該是“標題：...”

這應該可以解決 401 問題。