如何在自有网站实现Paysafecard余额查询功能（JS+HTML）

你的代码无法正常工作，核心问题集中在以下几点：

1. 浏览器同源策略（CORS）拦截 #

浏览器会阻止前端页面直接向不同域名的服务器发起请求，你的网站与paysafecard官网域名不一致，因此XMLHttpRequest请求会被CORS机制拦截，无法获取响应内容。

2. 请求方式与接口逻辑错误 #

paysafecard官网的余额查询并非通过GET请求拼接PIN到URL实现，实际是通过POST提交表单，且页面包含CSRF令牌等验证机制，直接构造GET请求无法触发正确的查询逻辑。

3. 页面结构依赖不可靠 #

即便绕过CORS，通过正则匹配页面HTML元素的方式也极不稳定——官网页面结构随时可能变更，正则会瞬间失效，同时官网还有反爬机制，会限制非浏览器环境的请求。

可行解决方向 #

方案一：使用官方开发者API #

paysafecard提供正式的开发者API服务，你需要先注册开发者账号、申请API权限，通过官方规范的接口完成余额查询。这是最合规、最稳定的方式。

方案二：搭建后端代理服务 #

若暂时无法使用官方API，需搭建自己的后端服务作为代理，绕过前端跨域限制：

1. 前端将PIN发送到你的后端接口
2. 后端使用服务器端请求（如Node.js的axios、Python的requests）模拟浏览器行为调用paysafecard的余额查询接口
3. 后端解析响应后，将余额数据返回给前端

以下是一个简易的Node.js后端代理示例，配合前端修改：

后端代码（Node.js + Express）

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

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

// 允许前端跨域请求
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'POST');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

app.post('/check-paysafe-balance', async (req, res) => {
  const { pin } = req.body;
  try {
    // 获取官网页面的CSRF令牌（示例逻辑，实际需根据官网调整）
    const pageRes = await axios.get('https://www.paysafecard.com/en/balance-check/');
    const $ = cheerio.load(pageRes.data);
    const csrfToken = $('input[name="_csrf"]').val();

    // 提交余额查询表单
    const balanceRes = await axios.post('https://www.paysafecard.com/en/balance-check/', {
      pin,
      _csrf: csrfToken
    }, {
      headers: {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36',
        'Referer': 'https://www.paysafecard.com/en/balance-check/'
      }
    });

    // 解析余额（示例逻辑，需随官网结构调整）
    const $balancePage = cheerio.load(balanceRes.data);
    const balance = $balancePage('.amount').text();
    
    res.json({ success: true, balance });
  } catch (error) {
    res.json({ success: false, message: '无效PIN或查询失败' });
  }
});

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

修改后的前端代码

<div>
  <input type="text" id="paysafecard" placeholder="Enter your PaysafeCard PIN" />
  <button id="checkBalance">Check Balance</button>
  <div id="balance"></div>
</div>

<script>
document.getElementById('checkBalance').addEventListener('click', async function() {
  var pin = document.getElementById('paysafecard').value;
  const balanceEl = document.getElementById('balance');
  
  try {
    const res = await fetch('http://localhost:3000/check-paysafe-balance', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ pin })
    });
    
    const data = await res.json();
    if (data.success) {
      balanceEl.innerHTML = 'Balance: ' + data.balance;
    } else {
      balanceEl.innerHTML = data.message;
    }
  } catch (err) {
    balanceEl.innerHTML = '查询出错，请稍后重试';
  }
});
</script>

重要提醒 #

• 模拟官网请求可能违反paysafecard的服务条款，使用前务必仔细阅读官方用户协议与规范。
• 官方API是唯一合规且长期稳定的解决方案，推荐优先申请使用。

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