Pterodactyl服务器状态页开发遇CORS错误求助

错误原因分析 #

你遇到的CORS错误，核心问题是Pterodactyl服务器返回的Access-Control-Allow-Origin头是空字符串，不符合浏览器的跨域安全规范，导致前端请求被拦截。

解决方案 #

方案1：在Pterodactyl面板配置CORS（推荐） #

• 登录Pterodactyl后台，进入Settings -> Application
• 找到CORS Allowed Origins选项，添加你的前端地址http://127.0.0.1:5500（生产环境替换为实际域名）
• 保存设置后重启面板服务，确保配置生效

方案2：用反向代理绕过CORS（适合无法修改面板配置的场景） #

自己搭建一个简单的代理服务器，转发API请求并添加合法的CORS头。示例Node.js代理代码（基于Express）：

const express = require('express');
const axios = require('axios');
const app = express();

app.use('/', async (req, res) => {
  try {
    const response = await axios({
      url: `http://181.214.197.131${req.url}`,
      headers: { 'Authorization': req.headers.authorization },
      method: req.method
    });
    res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500');
    res.setHeader('Access-Control-Allow-Headers', 'Authorization');
    res.status(response.status).json(response.data);
  } catch (err) {
    res.status(err.response?.status || 500).json(err.response?.data || { error: '代理请求失败' });
  }
});

app.listen(3000, () => console.log('代理服务运行在端口3000'));

前端代码里的api_url要改成代理地址：http://localhost:3000/api/application/servers

方案3：临时禁用浏览器CORS（仅开发测试用） #

Chrome浏览器可以通过启动参数绕过CORS检查：

chrome.exe --disable-web-security --user-data-dir="C:/ChromeDevSession"

注意：此方法仅适用于本地开发测试，绝对不能用于生产环境。

前端代码修正 #

你的现有代码存在HTML结构错误：<div id="server-data">不能直接放在<table>内部，需替换为<tbody id="server-data">才能正确渲染表格行。修正后的完整代码：

<!DOCTYPE html>
<html>

<head>
  <title>Server Status</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>

  <h1>Server Status</h1>

  <table>
    <thead>
      <tr>
        <th>Server Name</th>
        <th>Status</th>
        <th>Disk Space</th>
        <th>RAM</th>
        <th>CPU</th>
        <th>Owner</th>
        <th>Type</th>
      </tr>
    </thead>
    <tbody id="server-data">
    </tbody>
  </table>

  <script>
    // 若使用代理，替换为代理地址
    const api_url = "http://181.214.197.131/api/application/servers";
    const api_key = "Bearer ptla_88AGkvZFV9JeBviAoEdUKwSKmyr5WAED5kGVeKk2CxT";

    $(document).ready(function () {
      $.ajax({
        url: api_url,
        headers: { "Authorization": api_key },
        dataType: 'json',
        success: function (data) {
          for (var i = 0; i < data.data.length; i++) {
            const server = data.data[i];
            const server_name = server.attributes.name;
            const server_status = server.attributes.status;
            const server_disk_space = server.attributes.limits.disk;
            const server_ram = server.attributes.limits.memory;
            const server_cpu = server.attributes.limits.cpu;
            const server_owner = server.attributes.user.username;
            const server_type = server.attributes.feature_limits.allocations;

            $('#server-data').append(`
              <tr>
                <td>${server_name}</td>
                <td>${server_status}</td>
                <td>${server_disk_space}</td>
                <td>${server_ram}</td>
                <td>${server_cpu}</td>
                <td>${server_owner}</td>
                <td>${server_type}</td>
              </tr>
            `);
          }
        },
        error: function(xhr, status, error) {
          console.error('API请求失败:', error);
          $('#server-data').append('<tr><td colspan="7">加载服务器数据失败</td></tr>');
        }
      });
    });
  </script>

</body>

</html>

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