在尝试从 Rapidapi.com 访问数据时，有没有办法克服 React 中的 401 未授权错误？

Question

I am facing the problem of unauthorized 401. Done everything mentally possible, so posting it here with code and result pics. The data when accessed like this retrieves data without problem.

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

But when I try to access it via the code, it does not. please have a look at the code.

index.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;

store.js

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

Homepage.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;

Errors in console:

Thank you.

Answer 1

Quite interesting, I believe you're already subscribed to API. Generally, a 410 code indicates a lack of authentication.

You can try this in CryptoApi.js file

 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;

If it still doesn't work, you can always reach out to the RapidAPI support team at support@rapidapi.com

Answer 2

On your CryptoApi.js file, there's a typo

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

should be 'headers: ...'

That should fix the 401 issue.