axios.get 中的請求失敗，狀態代碼為 403（禁止）

Question

我正在使用 react.js 和 musixmatch api 構建一個簡單的歌詞查找器應用程序。當我請求 api 時，我在控制台中收到此錯誤Error: Request failed with status code 403 at createError (createError.js:16) at settle (settle.js:17) at XMLHttpRequest.handleLoad (xhr.js:62)

這是我的 componentDidMount() function

 import React, { Component } from 'react'; import axios from 'axios'; const Context = React.createContext(); export class Provider extends Component { state = { track_list: [], heading: "Top 10 Tracks" } componentDidMount() { axios.get( `https://cors-anywhere.herokuapp.com/https://api.musixmatch.com/ws/1.1/chart.tracks.get?chart_name=top&page=1&page_size=5&country=it&f_has_lyrics=1&apikey=${ process.env.REACT_APP_MM_KEY}` ).then(res => console.log(res.data)).catch(err => console.log(err)); } render() { return ( <Context.Provider value={this.state} > {this.props.children} </Context.Provider> ); } } export const Consumer = Context.Consumer;

Answer 1

狀態碼 403 表示您未獲得授權。 您可能輸入了錯誤的 api 密鑰，或者您的 process.env 不起作用（嘗試直接輸入 api 密鑰。）。

你確定你需要cors-anywhere嗎？ 你試過沒有嗎？

編輯：

您可以測試您的 api 密鑰是否有效，只需將 url 與您的密鑰一起輸入瀏覽器（無汽車），如下所示：

https://api.musixmatch.com/ws/1.1/chart.tracks.get?chart_name=top&page=1&page_size=5&country=it&f_has_lyrics=1&apikey=your_api_key

編輯2：

這有效，當我在 React 應用程序中嘗試時：所以問題一定出在你的 process.env 實現上。

componentDidMount() {
    axios.get(
        `https://cors-anywhere.herokuapp.com/https://api.musixmatch.com/ws/1.1/chart.tracks.get?chart_name=top&page=1&page_size=5&country=it&f_has_lyrics=1&apikey=your_api_key`
    )
        .then(res => console.log(res.data))
        .catch(err => console.log(err));
}

Answer 2

如果您沒有使用 API 密鑰，您可能已經用盡了您的請求。 你每小時只能收到大約 50 個請求，除非你使用 API 密鑰