React中带X-Api-Key的GET请求出现401未授权错误求助

在React项目中使用ky库发起GET请求，已携带X-Api-Key请求头，确认URL和密钥正确，但返回net::ERR_ABORTED 401 (Unauthorized)错误。相关代码如下：

密钥组件代码 #

export const API_KEY = "MY_KEY"

export const PrefixUrl = "MY_URL"

请求代码 #

import "./App.css";
import ky from 'ky';
import {API_KEY} from "./components/key";
import {PrefixUrl} from "./components/key";

async function getAllData(event) {
    try {
        const todos = await ky.get(PrefixUrl,{
            mode: 'no-cors',
            headers:{
                accept: 'application/json',
                'X-Api-Key': API_KEY,
            }
        }).json()
    console.log(todos)
    } catch (err){
        console.log(err.message);
    }
}

function App () {
    return (
    <div className="App">
        <h1>Hej</h1>
        <button onClick={getAllData}>Get data</button>
    </div>
)
}

export default App 

控制台错误信息 #

bundle.js:41878     (*************MY_URL*************)  net::ERR_ABORTED 401 (Unauthorized)

错误排查与解决方案 #

• 移除mode: 'no-cors'配置：这是核心问题。当设置no-cors模式时，浏览器会强制限制自定义请求头的发送，你设置的X-Api-Key和accept头都会被忽略，导致服务端无法验证密钥，直接返回401。
• 校验CORS配置：移除no-cors后，若出现跨域错误，需确认目标API服务端已配置允许你的前端域名发起跨域请求，并且明确允许X-Api-Key请求头。
• 检查请求头细节：确认X-Api-Key的键名拼写完全匹配服务端要求（注意大小写敏感），密钥值无多余空格或特殊字符。
• 验证请求有效性：用Postman或curl直接发起请求，排除服务端本身的问题。示例curl命令：

  curl -H "X-Api-Key: MY_KEY" -H "Accept: application/json" MY_URL
  

修正后的请求代码 #

import "./App.css";
import ky from 'ky';
import {API_KEY, PrefixUrl} from "./components/key";

async function getAllData(event) {
    try {
        const todos = await ky.get(PrefixUrl,{
            headers:{
                accept: 'application/json',
                'X-Api-Key': API_KEY,
            }
        }).json()
        console.log(todos)
    } catch (err){
        console.error(err); // 改用console.error更利于错误排查
    }
}

function App () {
    return (
    <div className="App">
        <h1>Hej</h1>
        <button onClick={getAllData}>Get data</button>
    </div>
)
}

export default App 

内容的提问来源于stack exchange，提问作者Everyone make mistakes