返回

通过 Node.js 发送 Discord API 请求:解决 CORS 错误

javascript

通过Node.js发送Discord API请求:解决CORS错误及最佳实践

直接从浏览器 JavaScript 调用 Discord API 会遇到 CORS(跨域资源共享)错误,这是浏览器的一种安全机制,防止未经授权的跨域访问。 要解决这个问题,我们需要使用 Node.js 作为后端代理服务器。

理解CORS错误

浏览器中的 JavaScript 代码在尝试访问不同域(协议、域名或端口)的资源时,会受到 CORS 策略的限制。 Discord API 服务器没有设置允许你的网页域名访问的 Access-Control-Allow-Origin 头信息,因此浏览器会阻止请求。

使用Node.js作为后端代理

Node.js 可以作为代理服务器,转发来自前端的请求到 Discord API。 由于 Node.js 运行在服务器端,不受浏览器 CORS 策略的限制,可以顺利地向 Discord API 发送请求。

操作步骤:

  1. 安装必要的包: 在项目目录中,使用 npm (Node Package Manager) 安装 expressnode-fetch (或 axios 等其他 HTTP 客户端):

    npm install express node-fetch
    

    express 用于创建 Web 服务器,node-fetch 用于发送 HTTP 请求。

  2. 创建 Node.js 服务器: 创建一个名为 server.js(或其他名称)的文件,编写以下代码:

    const express = require('express');
    const fetch = require('node-fetch');
    
    const app = express();
    const port = process.env.PORT || 3000; // 使用Vercel提供的端口,或者默认3000端口
    const DISCORD_API_ENDPOINT = 'https://discord.com/api'; // Discord API 基准URL
    const BOT_TOKEN = 'YOUR_BOT_TOKEN';  // 替换为你的bot token
    
    
    app.get('/user/:userId', async (req, res) => {
      try {
        const userId = req.params.userId;
        const url = `${DISCORD_API_ENDPOINT}/users/${userId}`;
    
        const response = await fetch(url, {
          headers: {
            'Authorization': `Bot ${BOT_TOKEN}`, // 正确的Authorization header格式
          },
        });
    
        const data = await response.json();
    
        if (response.ok) {
          res.json({ avatar: data.avatar });  // 只返回avatar字段
        } else {
          console.error('Discord API Error:', data); // 记录错误信息方便调试
          res.status(response.status).json({ error: data }); // 返回错误信息给前端
        }
      } catch (error) {
        console.error('Error fetching user data:', error); // 记录错误信息方便调试
        res.status(500).json({ error: 'Internal Server Error' });
      }
    });
    
    
    app.listen(port, () => {
      console.log(`Server running on port ${port}`);
    });
    
    
  3. 部署到 Vercel: 将代码推送到你的 Vercel 仓库,Vercel 会自动构建和部署你的应用。

  4. 前端调用: 在前端 JavaScript 代码中,使用 fetchXMLHttpRequest 向你的 Vercel 应用发送请求:

    fetch(`/user/818109259048157226`)  // 用实际用户ID替换
      .then(response => response.json())
      .then(data => {
        if (data.avatar) {
           // 处理头像数据
           console.log(data.avatar)
        } else {
          console.error("获取头像失败:", data.error);
        }
      })
      .catch(error => {
        console.error("请求错误:", error);
      });
    

安全建议

  • 不要在前端代码中直接暴露你的 Bot Token: 将 Bot Token 存储在服务器端环境变量中,避免泄露敏感信息。 Vercel 提供了设置环境变量的功能。
  • 限制 API 调用频率: 过多的 API 请求可能会导致你的 Bot 被 Discord 封禁。 可以使用速率限制库来控制请求频率。
  • 处理错误: 确保你的代码能够妥善处理各种错误情况,例如网络错误、API 返回错误等。

通过以上步骤,你就可以安全、有效地通过 Node.js 向 Discord API 发送请求,并避免 CORS 错误。记住,保护你的 Bot Token 至关重要。 通过使用服务器端代理和遵循最佳实践,你可以构建安全可靠的 Discord 集成应用。