调用Replicate API遇CORS及TypeError问题，求解决方案

核心问题分析 #

• 直接在前端调用Replicate API触发CORS错误，是因为浏览器的同源策略限制：Replicate API服务器未配置允许你的前端域名发起跨域请求，浏览器因此拦截了响应。
• 设置no-cors模式后出现Illegal invocation，是因为该模式禁止添加Authorization这类自定义请求头，同时no-cors下无法读取响应内容，完全满足不了业务需求。
• 另外，绝对不能在前端代码中暴露Replicate API Key，process.env.REPLICATE_API_KEY在前端环境中会被解析为明文，任何人都能盗用你的API额度。

正确解决方案：搭建后端代理 #

必须通过自己的后端服务转发请求，既规避CORS限制，又能安全存储API Key。以下是具体实现步骤：

1. 创建后端代理接口（以Node.js/Express为例）

先安装依赖：

npm install express node-fetch dotenv cors

编写代理服务代码：

const express = require('express');
const fetch = require('node-fetch');
const cors = require('cors');
require('dotenv').config();

const app = express();
app.use(cors()); // 允许跨域请求
app.use(express.json()); // 解析JSON请求体

// 代理Replicate的predictions接口
app.post('/api/replicate/predictions', async (req, res) => {
  try {
    const replicateResp = await fetch('https://api.replicate.com/v1/predictions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Token ${process.env.REPLICATE_API_KEY}`
      },
      body: JSON.stringify(req.body)
    });
    const data = await replicateResp.json();
    res.status(replicateResp.status).json(data);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

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

将你的Replicate API Key存入后端的.env文件：

REPLICATE_API_KEY=你的API密钥

2. 修改前端请求代码

前端不再直接调用Replicate API，改为请求自己的后端代理接口，同时移除前端的Authorization头：

// 改为请求后端代理接口
let startResponse = await fetch(
  "/api/replicate/predictions",
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      version:
        "d55b9f2dcfb156089686b8f767776d5b61b007187a4e1e611881818098100fbb",
      input: {
        image: imageUrl,
        structure: "hough",
        prompt: "a modern office",
        scale: 9,
        a_prompt:
          "best quality, photo from Pinterest, interior, cinematic photo, ultra-detailed, ultra-realistic, award-winning, interior design, natural lighting",
        n_prompt:
          "longbody, lowres, bad anatomy, bad hands, missing fingers, extra digit, fewer digits, cropped, worst quality, low quality",
      },
    }),
  }
);

let jsonStartResponse = await startResponse.json();

3. 启动服务

先启动后端代理服务，再运行前端项目，即可正常发起请求，同时避免CORS和API Key暴露问题。

内容的提问来源于stack exchange，提问作者Captai-N