如何解决Workable API跨域问题，用JS在外部站点展示职位列表？

Workable API不支持跨域资源共享（CORS），因此直接在前端JavaScript中调用会触发浏览器的同源策略限制，导致Access-Control-Allow-Origin报错。以下是几种可行的解决方法：

搭建后端代理服务器 #

通过自己的后端服务器作为中间层，转发对Workable API的请求——服务器端请求不受浏览器CORS规则限制，再将获取到的职位数据返回给前端。

Node.js/Express示例代码 #

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

// 代理Workable职位数据的接口
app.get('/api/workable-jobs', async (req, res) => {
  try {
    const workableApiUrl = 'https://subdomain.workable.com/spi/v3/jobs?limit=50';
    const requestOptions = {
      method: 'GET',
      headers: {
        'accept': 'application/json',
        'Authorization': 'Bearer AccessTokenHere' // 替换为你的Workable访问令牌
      }
    };

    const apiResponse = await fetch(workableApiUrl, requestOptions);
    const jobData = await apiResponse.json();
    res.json(jobData);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(PORT, () => {
  console.log(`代理服务器运行在端口 ${PORT}`);
});

前端调用方式 #

将原本直接请求Workable API的代码，改为请求自己的代理接口：

fetch('http://你的服务器域名/api/workable-jobs')
  .then(response => response.json())
  .then(jobData => {
    // 在这里处理并展示职位列表
    console.log(jobData);
  })
  .catch(err => console.error(err));

注意：务必将Workable访问令牌保存在后端，不要在前端代码中暴露，避免安全风险。

使用无服务器函数作为代理 #

如果不想维护完整的后端服务器，可以用无服务器函数（如Vercel Edge Functions、Netlify Functions、AWS Lambda）实现轻量级代理：

Vercel Edge Function示例 #

创建api/workable-jobs.js文件：

export default async function handler(req, res) {
  const workableApiUrl = 'https://subdomain.workable.com/spi/v3/jobs?limit=50';
  const requestOptions = {
    method: 'GET',
    headers: {
      'accept': 'application/json',
      'Authorization': 'Bearer AccessTokenHere'
    }
  };

  try {
    const apiResponse = await fetch(workableApiUrl, requestOptions);
    const jobData = await apiResponse.json();
    res.status(200).json(jobData);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}

部署后，前端直接请求/api/workable-jobs即可获取数据。

检查Workable内置嵌入组件 #

部分ATS平台（包括Workable）提供现成的职位嵌入代码，无需手动调用API即可展示职位列表。可以登录Workable后台，查看「职位板嵌入」相关设置，直接复制HTML代码添加到你的外部站点中，这种方式无需处理CORS问题。

内容的提问来源于stack exchange，提问作者laurence keith albano