React调用Spotify API开发搜索组件返回401错误求助

核心问题原因 #

• token获取时序异常：你将token存在组件state中，需要等待useEffect执行完成才能拿到localStorage里的有效值，组件刚渲染完成时点击按钮，state中的token还是初始空值，直接导致Authorization头无效触发401。
• 接口必填参数缺失：Spotify /v1/search 接口强制要求传type参数指定搜索资源类型（比如搜艺人填type=artist），当前请求仅传query参数不符合接口规范。
• 多余请求头配置：GET请求没有请求体，不需要设置Content-Type，该字段仅用于携带请求体的POST/PUT类请求，多余配置可能触发接口校验失败。
• 搜索参数未编码：如果选中的艺人名称包含空格、特殊字符，直接拼接进URL会导致请求路径异常，需做转义处理。
• 命名冲突：组件名和请求函数名完全相同，可能触发意外逻辑异常。

修复后代码 #

import React, {useState} from "react";
import axios from "axios";
import {useOptionContext} from "../context/SelectedOptionsProvider";

export default function ArtistOnSpotify() {
    const [data, setData] = useState({});
    const {
        selectedArtist,
    } = useOptionContext();

    // 请求函数改名，避免和组件重名冲突
    async function fetchArtistOnSpotify() {
        try {
            // 发请求时直接从localStorage取token，绕过state异步更新的时序问题
            const token = localStorage.getItem("accessToken");
            if (!token) return console.log("未获取到有效token");
            // 补全type参数，对搜索内容做编码转义
            const searchQuery = encodeURIComponent(selectedArtist);
            const response = await axios.get(`https://api.spotify.com/v1/search?q=${searchQuery}&type=artist`, {
                headers: {
                    Authorization: "Bearer " + token,
                    Accept: "application/json"
                },
            });
            console.log(response.data);
            setData(response.data);
        } catch (error) {
            console.log(error);
        }
    };

    return (
        <div>
            <button onClick={fetchArtistOnSpotify}>klik</button>
        </div>
    )
}

额外校验点 #

如果修改后仍然返回401，直接打印localStorage中取出的token值，确认两个点：

1. token未过期：Spotify的accessToken默认有效期仅1小时，过期后需要重新走授权流程获取新token
2. 你的授权流程中已经申请了搜索接口对应的权限scope

内容的提问来源于stack exchange，提问作者Jazzper