调用Replicate AI API遇CORS错误，添加响应头仍未解决

核心问题分析 #

你在请求头里添加Access-Control-Allow-Origin、Access-Control-Allow-Methods是错误的——这些是服务器需要返回的响应头，不是客户端请求时要发送的头。浏览器的CORS校验逻辑是检查服务器返回的响应中是否包含合法的跨域头，所以你在前端请求里加这些配置完全无效。

具体解决方案 #

方案1：本地开发环境用框架代理

如果使用Create React App、Vite这类前端框架，通过配置本地代理转发请求，直接绕过CORS限制：

• Create React App：在package.json中添加代理配置：

  "proxy": "https://api.replicate.com"
  

  然后将请求URL改为相对路径：

  fetch("/v1/predictions", { /* 请求配置 */ })
  

• Vite：在vite.config.js中配置代理规则：

  export default defineConfig({
    server: {
      proxy: {
        "/replicate-proxy": {
          target: "https://api.replicate.com",
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/replicate-proxy/, "")
        }
      }
    }
  })
  

  请求时使用代理路径：/replicate-proxy/v1/predictions。

方案2：搭建后端代理服务器（生产环境适用）

自己编写一个轻量后端服务，转发前端请求到Replicate API，让浏览器只与你的后端同源，避免触发CORS校验。以下是Node.js/Express的示例：

const express = require('express');
const fetch = require('node-fetch');
const app = express();
app.use(express.json());

// 转发POST请求到Replicate
app.post('/api/replicate/predictions', async (req, res) => {
  try {
    const replicateRes = await fetch('https://api.replicate.com/v1/predictions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': req.headers.authorization,
      },
      body: JSON.stringify(req.body),
    });
    const data = await replicateRes.json();
    res.status(replicateRes.status).json(data);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

// 转发GET请求查询结果
app.get('/api/replicate/predictions/:id', async (req, res) => {
  try {
    const replicateRes = await fetch(`https://api.replicate.com/v1/predictions/${req.params.id}`, {
      headers: {
        'Authorization': req.headers.authorization,
      },
    });
    const data = await replicateRes.json();
    res.status(replicateRes.status).json(data);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

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

前端请求时改为访问后端地址：http://localhost:3001/api/replicate/predictions。

额外问题修正：图片参数错误

你代码中用URL.createObjectURL(blobo)作为image参数，这是浏览器本地的Blob URL，Replicate服务器无法访问，会导致请求失败。需要将图片转为base64字符串或上传到公开存储服务获取可访问URL。转base64的示例：

const reader = new FileReader();
reader.onload = async () => {
  const base64Str = reader.result.split(',')[1]; // 移除base64前缀
  // 在请求input中使用：image: `data:image/jpeg;base64,${base64Str}`
};
reader.readAsDataURL(selectedImage);

错误补充说明 #

你遇到的预检请求（OPTIONS）失败，是因为Replicate API服务器未返回允许http://localhost:3000的跨域响应头，浏览器因此拦截了后续请求。通过代理方案可以彻底规避这个限制。

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