request failed with status code 403(forbidden) in axios.get

Question

i am building a simple lyrics finder app using react.js and using musixmatch api. when i request the api i get this error in consoleError: Request failed with status code 403 at createError (createError.js:16) at settle (settle.js:17) at XMLHttpRequest.handleLoad (xhr.js:62)

this is my 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

status code 403 means that you are not authorized. You could either have entered a wrong api key or maybe your process.env does not work (try to enter the api key directly!).

And are u sure that you need cors-anywhere? Did you try without?

EDIT:

you can test if your api key works when you simply enter the url with your key into the browser (without cars-anywhere) like so:

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

EDIT 2:

this works, when I try it inside a React application: So the problem must be at your process.env implementation.

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