使用Confluent Cloud Kafka时API请求遭CORS策略拦截问题

尝试向Confluent Cloud上的Kafka集群发送消息，Postman中可正常运行，但在Svelte应用中遇到CORS错误：

从源'http://localhost:3000'访问时被CORS策略阻止：预检请求的响应未通过访问控制检查：请求的资源上不存在'Access-Control-Allow-Origin'标头。如果您需要不透明响应，请将请求的mode设置为'no-cors'以禁用CORS获取资源。

请求代码 #

var apiHeaders = new Headers();
apiHeaders.append("Content-Type", "application/json");
apiHeaders.append("Authorization", "Basic <BASE64>");

const clusterId = '<CLUSTERID>';
const restEndpoint = '<ENDPOINT>';

const postMessage = (data, topic) => {
    let raw = JSON.stringify({
        "value": {
            "type": "JSON",
            "data": {
                data
            }
        }
    });

    let requestOptions = {
        method: 'POST',
        headers: apiHeaders,
        body: raw,
        redirect: 'follow'
    };

    fetch(`${restEndpoint}/kafka/v3/clusters/${clusterId}/topics/${topic}/records`, requestOptions)
        .then(response => response.text())
        .then(result => console.log(result))
        .catch(error => console.log('error', error));
}


export const sendLogMessage = (data) => {
    postMessage(data, '<TOPICNAME>');
}

AWS Amplify头配置 #

[对应截图]

Svelte配置（svelte.config.js） #

import adapter from '@sveltejs/adapter-static';
// import adapter from '@sveltejs/adapter-node';
// import adapter from '@sveltejs/adapter-auto';
// import firebase from "svelte-adapter-firebase";

/** @type {import('vite').Plugin} */
const viteServerConfig = {
    name: 'log-request-middleware',
    configureServer(server) {
        server.middlewares.use((req, res, next) => {
            res.setHeader("Access-Control-Allow-Origin", "*");
            res.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST");
            res.setHeader("Cross-Origin-Resource-Policy", "cross-origin");
            res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
            res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
            res.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Amz-Date,Authorization,X-Api-Key,x-requested-with");
            next();
        });
    }
};

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter(), // for the firebase adapter use "firebase()" instead of "adapter()"
        vite: {
            plugins: [viteServerConfig]
        },
        prerender: {
            default: true
        },
        trailingSlash: 'never'
    }
};

export default config;

核心问题分析 #

你在Svelte配置里添加的CORS头是给本地开发服务器设置的，而浏览器的CORS检查针对的是目标服务器（Confluent Cloud的）返回的响应头，所以本地服务器的配置完全无效。Postman不受浏览器CORS策略限制，因此能正常请求。

正确解决步骤 #

1. 配置Confluent Cloud的CORS规则（推荐方案）

Confluent Cloud支持自定义CORS配置，直接在控制台给Kafka REST API设置允许的源：

• 登录Confluent Cloud控制台，找到目标集群
• 进入Cluster settings -> Networking -> CORS
• 添加前端域名：本地开发填http://localhost:3000，生产环境填Amplify部署后的域名
• 允许的方法勾选POST，允许的头包含Content-Type、Authorization
• 保存配置后等待几分钟生效

2. 本地开发使用代理转发

如果暂时无法修改Confluent的CORS配置，可在SvelteKit中配置代理，绕过浏览器CORS检查：

• 修改svelte.config.js，在vite.server下添加代理规则：

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter(),
        vite: {
            plugins: [viteServerConfig],
            server: {
                proxy: {
                    '/api/kafka': {
                        target: '<ENDPOINT>',
                        changeOrigin: true,
                        rewrite: (path) => path.replace(/^\/api\/kafka/, '')
                    }
                }
            }
        },
        prerender: {
            default: true
        },
        trailingSlash: 'never'
    }
};

• 修改请求代码中的restEndpoint为代理前缀：

const restEndpoint = '/api/kafka';

此时本地请求会先经过Svelte开发服务器转发，规避浏览器CORS限制。

3. 生产环境用Amplify代理转发

如果生产环境仍遇CORS问题，可在Amplify中配置重写规则：

• 进入Amplify控制台，找到目标应用
• 进入App Settings -> Rewrites and redirects
• 添加规则：
  • Source address: /api/kafka/<*>
  • Target address: <ENDPOINT>/<*>
  • Type: 200 (Rewrite)
• 前端请求统一使用/api/kafka作为前缀，Amplify会自动转发到Confluent API。

注意事项 #

• 不要在生产环境使用mode: 'no-cors'，该设置会让请求变成不透明响应，无法获取返回结果，不符合业务需求。
• Confluent Cloud的CORS配置需要几分钟生效，设置后请等待再测试。

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