JavaScript中如何给Authorization头赋值Bearer Token请求Canvas API

以下给出两种常见的实现方式，均可实现和你提供的curl命令完全一致的请求效果：

1. 原生Fetch API实现（无需额外依赖） #

适合所有JS运行环境，不需要引入第三方库，是最通用的实现方案：

// 替换为你自己的实际访问令牌
const ACCESS_TOKEN = "<ACCESS-TOKEN>";
const API_URL = "https://canvas.instructure.com/api/v1/courses";

fetch(API_URL, {
  method: "GET",
  headers: {
    "Authorization": `Bearer ${ACCESS_TOKEN}`
  }
})
.then(response => {
  // 校验请求是否成功
  if (!response.ok) {
    throw new Error(`请求异常，状态码：${response.status}`);
  }
  // 解析返回的JSON数据
  return response.json();
})
.then(data => {
  // 此处处理拿到的课程数据
  console.log("获取到的课程数据：", data);
})
.catch(error => {
  // 处理请求异常
  console.error("请求失败：", error);
});

如果你更习惯async/await的同步写法，可以用以下版本：

async function getCanvasCourses() {
  const ACCESS_TOKEN = "<ACCESS-TOKEN>";
  const API_URL = "https://canvas.instructure.com/api/v1/courses";
  
  try {
    const response = await fetch(API_URL, {
      method: "GET",
      headers: {
        "Authorization": `Bearer ${ACCESS_TOKEN}`
      }
    });
    if (!response.ok) {
      throw new Error(`请求异常，状态码：${response.status}`);
    }
    const data = await response.json();
    console.log("获取到的课程数据：", data);
    return data;
  } catch (error) {
    console.error("请求失败：", error);
  }
}

// 调用函数即可发起请求
getCanvasCourses();

2. Axios库实现（适合已有Axios依赖的项目） #

如果你的项目已经引入了Axios库，可以用更简洁的写法：
首先如果还没安装Axios，Node.js环境执行npm install axios安装，前端环境可以直接引入对应CDN资源。

const axios = require('axios');
// 前端ES模块环境可以替换为 import axios from 'axios'

// 替换为你自己的实际访问令牌
const ACCESS_TOKEN = "<ACCESS-TOKEN>";
const API_URL = "https://canvas.instructure.com/api/v1/courses";

axios.get(API_URL, {
  headers: {
    "Authorization": `Bearer ${ACCESS_TOKEN}`
  }
})
.then(response => {
  console.log("获取到的课程数据：", response.data);
})
.catch(error => {
  console.error("请求失败：", error.response?.data || error.message);
});

注意事项：

• 不要把Access Token硬编码在前端公开可访问的代码中，会存在令牌泄露的安全风险，如果是前端应用建议把请求逻辑放到后端服务层转发，避免令牌直接暴露给用户。
• 如果在浏览器端直接调用出现跨域错误，需要到Canvas的管理后台将你当前站点的域名添加到CORS白名单中。

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