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;

Solution

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

Comments

[ashen madusanka]

are u sure ~cors-anywhere.herokuapp.com/https://api.musixmatch.com/ws/1‌​.1/… url correct ?

[Dishant]

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.

[pguardiario]

I believe that cors-anywhere server is limiting access, you're going to have to run your own in that case.

[Dishant]

yes api is working fine when i enter the url in the browser(without cors-anywhere) . Now what should i do. Please help me I am begnner in react and javascript.

[PixAff]

try to use the url inside of your component without cors-anywhere and with the api key directly (paste the code that worked in the url into your get request).

[Dishant]

i did exactly what you said but now i am getting these errors..... GET api.musixmatch.com/ws/1.1/… net::ERR_FAILED

[Dishant]

and also these: Access to XMLHttpRequest at 'api.musixmatch.com/ws/1.1/…' from origin 'localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. context.js:13 Error: Network Error at createError (createError.js:16) at XMLHttpRequest.handleError (xhr.js:84)

[PixAff]

see my edited answer above. It works (even with cors-anywhere) on my side. Check your env implementation!

[Dishant]

i tried a different api key. Again the url works in browser and same url gives this error in console: Error: Network Error at createError (createError.js:16) at XMLHttpRequest.handleError (xhr.js:84)

[Dishant]

the issue is finally solved now. after opening the link in browser with cors-anywhere i had to click on the button(Request Temporary access to demo server) and after i clicked on that button and refreshed the react-app i got the desired result.