如何解决Tapkey Web API调用时的CORS策略拦截问题

问题原因 #

• Client Credentials授权模式禁止在浏览器前端直接使用，因为需要暴露client_secret，会导致密钥泄露，严重威胁账号安全。
• Tapkey的login.tapkey.com/connect/token接口未配置CORS规则允许前端跨域请求，因此浏览器会直接拦截该请求，返回你看到的CORS错误。

正确解决方式：通过后端代理请求 #

将获取Token的逻辑移至你的后端服务，前端调用自身后端接口，由后端向Tapkey发起Token请求。这样既规避了CORS问题，又能保护client_secret不被暴露。

示例后端代码（Node.js + Express）

const express = require('express');
const fetch = require('node-fetch');
const app = express();
const port = 3000;

// 允许前端跨域请求后端服务（生产环境请指定具体域名）
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST');
  next();
});

// 封装获取Tapkey Token的接口
app.post('/get-tapkey-token', async (req, res) => {
  try {
    const response = await fetch('https://login.tapkey.com/connect/token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: new URLSearchParams({
        'client_id': '你的client_id',
        'client_secret': '你的client_secret',
        'scope': 'read:owneraccounts read:core:entities write:core:entities write:grants',
        'grant_type': 'client_credentials'
      })
    });
    const data = await response.json();
    res.json(data);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

app.listen(port, () => {
  console.log(`后端服务运行在 http://localhost:${port}`);
});

修改后的前端代码

async function connection() {
  try{
      let response = await fetch('http://localhost:3000/get-tapkey-token', {
          method:'POST'
      });
      return await response.json();
  } catch(err){
      return err;
  }
};

async function main(){
    let result = await connection(); // 原代码存在拼写错误：调用了未定义的connection4，需修正为connection
    console.log(result);
};

main();

额外注意事项 #

• 生产环境中，不要使用Access-Control-Allow-Origin: *，应指定你的前端域名，降低安全风险。
• 后端的client_secret不要硬编码在代码中，建议通过环境变量管理。

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