在尝试从 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 问题。