在HTML/JS中无法发送POST请求：缺失Access-Control-Allow-Origin头

核心原因 #

JDoodle的stage.jdoodle.com/execute端点未配置Access-Control-Allow-Origin响应头，浏览器同源策略会阻止前端直接发起跨域请求；更关键的是，前端直接调用会暴露你的JDoodle Client ID和Secret，存在严重安全风险。

可行解决方案 #

1. 搭建后端代理（推荐） #

自己写一个简单的后端服务作为中转，前端请求自己的后端接口，由后端去调用JDoodle API，既规避CORS问题，又能保护API密钥。

示例Node.js（Express）代理代码：

const express = require('express');
const axios = require('axios');
const app = express();
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('/execute-java', async (req, res) => {
  try {
    // 从环境变量读取密钥，禁止硬编码
    const jdoodleParams = {
      clientId: process.env.JDOODLE_CLIENT_ID,
      clientSecret: process.env.JDOODLE_CLIENT_SECRET,
      ...req.body // 接收前端传来的代码、语言版本等参数
    };
    const response = await axios.post('https://stage.jdoodle.com/execute', jdoodleParams);
    res.json(response.data);
  } catch (err) {
    res.status(err.response?.status || 500).send(err.response?.data || '请求失败');
  }
});

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

前端jQuery请求代码（改为请求自己的代理）：

$.ajax({
  url: 'http://你的后端域名:3001/execute-java',
  method: 'POST',
  contentType: 'application/json',
  data: JSON.stringify({
    script: 'public class Test { public static void main(String[] args) { System.out.println("Hello"); } }',
    language: 'java',
    versionIndex: '0'
  }),
  success: function(result) {
    console.log('执行结果:', result.output);
  },
  error: function(xhr) {
    console.error('错误:', xhr.responseText);
  }
});

2. 检查JDoodle开发者后台的CORS配置 #

登录JDoodle开发者控制台，查看是否有CORS白名单设置，将你的前端域名添加到允许列表中。注意：stage测试环境可能不支持该配置，建议切换到正式API端点尝试。

3. 规避前端直接调用的安全风险 #

绝对不要在前端代码中硬编码JDoodle的Client ID和Secret，任何人都能通过浏览器开发者工具获取这些信息，导致你的API配额被滥用，后端中转是唯一安全的实现方式。

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