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(
            `://api.musixmatch/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;

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;

• javascript
• reactjs
• axios

• are u sure ~cors-anywhere.herokuapp.com/https://api.musixmatch.com/ws/1.1/… url correct ? – ashen madusanka Commented Apr 2, 2021 at 6:58
• when i enter the url in browser with api key then it works. I also tried enetring the api key directly ( without cors-anywhere) but i still get error. – Dishant Commented Apr 2, 2021 at 13:03
• I believe that cors-anywhere server is limiting access, you're going to have to run your own in that case. – pguardiario Commented Apr 4, 2021 at 0:58

4 Answers 4

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

If you are not using an API key, you might have exhausted your request. You only get about 50 request thereabout per hour or something like, except you use an API key

From my experience, it was problem with axios version. so if you tried all solutions and still can not find the root cause, you can try to change axios version. I was using was assume role credentials to make a request against a service and always getting rejected with 403 even though the credentials were correct. I was using axios 1.3.1 but then I downgraded it to 0.27.2 and now my code is working fine

add in your Header

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

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

Add in your Header if you facing 403 Error

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