如何使用fetch携带Bearer Token调用API？现有代码无法连接如何解决

云上老周

2026-9-27

问题原因分析

fetch 是异步API，返回值是Promise对象，你直接同步打印response只会拿到 pending 状态的 Promise 实例，无法获取真实接口返回内容
你配置了mode: 'no-cors'，这是核心错误：no-cors模式只允许使用CORS安全列表内的请求头，自定义的Authorization请求头会被浏览器自动拦截无法发送，同时该模式下也无法读取接口返回的响应内容
x-frame: 'same-origin'配置位置错误，该配置属于请求头字段，不应该和method、headers平级放在fetch的配置根层级
Token的存储逻辑冗余，你直接存储字符串即可，不需要套一层JSON.stringify和JSON.parse，不过这部分不影响请求发送

修复后的代码

sessionStorage.setItem('MCToken', '123456');

// 用async标记异步函数
let datastructuresAPI = async () => {
    let token = sessionStorage.getItem('MCToken');
    let header = new Headers({
        'Cache-Control': 'no-cache',
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json',
        'x-frame': 'same-origin' // 移到headers内
    });
    try {
        // 用await等待fetch返回结果
        let response = await fetch('https://mon_url',{
            method: 'POST',
            headers: header,
            body:JSON.stringify({
                "methodName":"connect",
                'grant_type': 'client_credentials',
                "serviceName":"ConnectionService"
            }),
            // 删掉no-cors配置，如果有跨域问题需要后端配置CORS响应头
            mode: 'cors'      
        });
        // 解析响应内容，根据接口返回格式是json还是text选择对应的方法
        let resData = await response.json();
        console.log(resData)
    } catch (err) {
        console.error('请求出错：', err)
    }
}
datastructuresAPI();