请求失败，axios.get 中的状态码为 403（禁止）

Posted 2023-02-22

【中文标题】请求失败，axios.get 中的状态码为 403（禁止）

【英文标题】：request failed with status code 403(forbidden) in axios.get

【发布时间】：2021-06-29 02:20:28

【问题描述】：

我正在使用 react.js 和 musixmatch api 构建一个简单的歌词查找器应用程序。当我请求 api 时，我在 consoleError: 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;

【问题讨论】：

你确定~cors-anywhere.herokuapp.com/https://api.musixmatch.com/ws/1.1/… url 正确吗？

当我使用 api 密钥在浏览器中输入 url 时，它可以工作。我也尝试直接输入 api 密钥（没有 cors-anywhere）但我仍然得到错误。

我相信 cors-anywhere 服务器正在限制访问，在这种情况下您将不得不运行自己的服务器。

【参考方案1】：

状态码 403 表示您未获得授权。您可能输入了错误的 api 密钥，或者您的 process.env 不起作用（尝试直接输入 api 密钥！）。

你确定你需要 cors-anywhere 吗？你试过没有吗？

编辑：

您可以测试您的 api 密钥是否有效，只需将带有密钥的 url 输入浏览器（无需汽车任何地方），如下所示：

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

【讨论】：

是的，当我在浏览器中输入 url（没有 cors-anywhere）时，api 工作正常。现在我该怎么办。请帮助我，我是 react 和 javascript 方面的初学者。

尝试在没有 cors-anywhere 的情况下直接使用 api 密钥在组件内部使用 url（将 url 中的代码粘贴到您的 get 请求中）。

我完全按照你说的做了，但现在我遇到了这些错误..... GET api.musixmatch.com/ws/1.1/… net::ERR_FAILED

请参阅上面我编辑的答案。它在我身边有效（即使在任何地方都可以使用 cors）。检查你的环境实现！

问题终于解决了。在使用 cors-anywhere 在浏览器中打开链接后，我必须单击按钮（请求临时访问演示服务器），然后单击该按钮并刷新 react-app，我得到了所需的结果。