本地Web应用对接Canvas LMS OAuth2/LTI时的CORS及授权码获取问题

嘿，我来帮你搞定本地Web应用对接Canvas LMS OAuth2/LTI的这两个问题，毕竟咱也踩过类似的坑😉

Canvas的OAuth2授权码流程默认是后端导向的，但要让前端JS拿到授权码，有两种实用的方式：

方式1：前端路由捕获回调（适合单页应用） #

• 第一步：先构造Canvas的授权URL，参数要带全：

  const canvasAuthUrl = 'https://your-canvas-instance.instructure.com/login/oauth2/auth' +
    '?client_id=你的Canvas Client ID' +
    '&redirect_uri=http://localhost:3000/callback' + // 必须和Canvas后台配置的一致
    '&response_type=code' +
    '&scope=你需要的权限（比如url:GET|/api/v1/courses）';
  

• 第二步：把页面上的按钮做成链接或者绑定点击事件，跳转到这个URL：

  <!-- 直接用a标签 -->
  <a href="${canvasAuthUrl}" target="_self">点击授权Canvas</a>
  
  <!-- 或者JS绑定点击事件 -->
  <button id="authBtn">授权Canvas</button>
  <script>
    document.getElementById('authBtn').addEventListener('click', () => {
      window.location.href = canvasAuthUrl;
    });
  </script>
  

• 第三步：用户授权后，Canvas会跳转到你指定的redirect_uri（比如http://localhost:3000/callback），此时URL的查询参数里会带code。在这个回调页面/路由里，用JS提取授权码：

  const authCode = new URLSearchParams(window.location.search).get('code');
  if (authCode) {
    // 这里就可以用授权码做后续操作了，比如存到localStorage或者发给后端换token
    console.log('拿到授权码：', authCode);
  }
  

  ✅ 注意：一定要在Canvas开发者后台把这个redirect_uri添加到允许的回调地址列表里，不然会直接报错。

方式2：弹窗+postMessage（避免页面跳转，体验更好） #

如果不想让用户离开主页面，可以用弹窗来处理授权流程：

• 第一步：按钮点击时打开弹窗，指向Canvas授权URL：

  document.getElementById('authBtn').addEventListener('click', () => {
    const popup = window.open(canvasAuthUrl, 'canvasAuth', 'width=600,height=600');
  });
  

• 第二步：准备一个专门的callback.html文件，作为Canvas的跳转目标（redirect_uri设为http://localhost:3000/callback.html），这个文件里的JS只负责把授权码发回主页面：

  <!-- callback.html -->
  <script>
    const authCode = new URLSearchParams(window.location.search).get('code');
    if (authCode) {
      // 向主页面发送授权码，注意要验证origin
      window.opener.postMessage(authCode, 'http://localhost:3000');
      window.close();
    }
  </script>
  

• 第三步：在主页面监听message事件，接收授权码：

  window.addEventListener('message', (event) => {
    // 一定要验证来源，避免恶意消息
    if (event.origin !== 'http://localhost:3000') return;
    const authCode = event.data;
    console.log('从弹窗拿到授权码：', authCode);
    // 后续处理逻辑
  });
  

先澄清一个误区：跳转到Canvas的授权页面是不会触发CORS的，因为这是浏览器的页面跳转行为，不是AJAX请求。CORS问题通常出在用授权码换access_token的环节——如果你直接在前端用AJAX请求Canvas的token端点，浏览器会因为跨域限制拦截请求。

解决这个问题最靠谱的方式是本地后端代理，具体思路是：

1. 前端拿到授权码后，把它发送给本地搭建的后端服务（比如Node.js/Express、Python Flask）；
2. 后端服务再去请求Canvas的token端点（后端请求不受浏览器CORS限制）；
3. 后端拿到access_token后，再返回给前端。

给你一个Node.js/Express的极简代理示例：

const express = require('express');
const axios = require('axios');
const app = express();
app.use(express.json());

// 前端调用这个接口来换token
app.post('/api/exchange-token', async (req, res) => {
  const { code } = req.body;
  try {
    const tokenResponse = await axios.post(
      'https://your-canvas-instance.instructure.com/login/oauth2/token',
      new URLSearchParams({
        grant_type: 'authorization_code',
        client_id: '你的Canvas Client ID',
        client_secret: '你的Canvas Client Secret',
        code: code,
        redirect_uri: 'http://localhost:3000/callback' // 和授权时的redirect_uri一致
      })
    );
    res.json(tokenResponse.data); // 返回access_token等信息给前端
  } catch (err) {
    res.status(500).json({ error: '换token失败：' + err.message });
  }
});

app.listen(3001, () => console.log('本地代理服务运行在http://localhost:3001'));

前端就可以用AJAX请求这个本地接口，完全不会有CORS问题：

// 拿到授权码后调用代理接口
fetch('http://localhost:3001/api/exchange-token', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ code: authCode })
})
.then(res => res.json())
.then(data => {
  console.log('拿到access_token：', data.access_token);
});

如果是对接LTI 1.3，流程本质是OpenID Connect，核心思路和上面一致：还是通过授权码跳转拿code，然后用后端代理换token，只是授权URL和参数会有差异，需要参考Canvas的LTI 1.3文档调整。

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