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() 函数

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 密钥是否有效：

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 密钥，则您的请求可能已用尽。除非您使用 API 密钥，否则您每小时只会收到大约 50 个请求或类似的请求

Answer 3

根据我的经验，这是axios版本的问题。因此，如果您尝试了所有解决方案仍然无法找到根本原因，您可以尝试更改 axios 版本。我使用的是假设角色凭据来向服务发出请求，尽管凭据正确，但总是被拒绝并返回 403。我使用的是 axios 1.3.1，但后来我将其降级到 0.27.2，现在我的代码工作正常

Answer 4

添加到您的标题中

  const headers = new Headers();
    headers.append("Accept", "application/json");

    headers.append('Accept-Encoding', 'gzip, deflate, br');

如果遇到 403 错误，请添加标题

headers.append('Accept-Encoding', 'gzip, deflate, br');

Answer 5

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;

25185