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;Best Answer
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));}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');
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