cors - 使用 Confluent Cloud 和 Kafka 的 CORS 策略阻止了 API 请求

Question

我正在尝试在 Confluent 云上的 Kafka 集群上发布消息。它在 Postman 上运行良好，但是当我尝试在我的 Svelte 应用程序上运行时，我收到了这个错误:

Access to fetch at <ENDPOINT> from origin 'http://localhost:3000'has been blocked by CORS policy: Response to preflight request doesn'tpass access control check: No 'Access-Control-Allow-Origin' header ispresent on the requested resource. If an opaque response serves yourneeds, set the request's mode to 'no-cors' to fetch the resource withCORS disabled.

请求看起来像这样:

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>');
}

我的 header 在 AWS Amplify 上的设置如下:

而且我的 header 在 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;

Answer 1

Kafka 旨在用于 3+ 层架构解决方案。从一开始，其核心卖点之一就是可扩展性。这是一个观点，但我在网上找到的所有关于 Kafka 的内容，包括教程、文章和文档似乎都支持这个意图。

也就是说，如果您要检查浏览器对 Confluent Cloud 进行的 OPTIONS 调用，或者通过 Postman 显式进行 OPTIONS 调用，您将看到没有 CORS 响应 header 。这意味着 默认情况下 Confluent Cloud 提供的用于与您的 Kafka 集群交互的 REST API 不会被浏览器访问。让它工作的唯一方法是让你的 Confluent Cloud bootstrap 服务器与你的 Web UI 在同一个域中，并且考虑到 Confluent Cloud 作为托管服务提供的抽象，它肯定会比它的值(value)更麻烦，如果甚至有可能。

考虑一下:假设您能够直接从您的 Web UI 成功地将记录生成到您的 Kafka 主题中。这意味着你的 api key 和 secret 将被捆绑到你的前端代码中，这对于坏人来说是微不足道的，然后用来发动 DOS 攻击。参见 this StackOverflow question .

最好的办法是从前端调用一些安全的 API，并让服务器包含凭据。从那里将记录生成到 Confluent Cloud 中是微不足道的，因为它们有许多可用的 SDK。如果您还没有设置 API 或想跳过为此创建专用端点，则可以使用 Confluent REST Proxy .设置很简单:

1. 在您将运行代理的服务器上，安装 Java
2. 安装 docker
3. 按照教程说明进行操作 found here
4. 如果代理服务器将在与您的前端不同的域上运行(例如在开发的情况下)，请将以下环境变量添加到 rest-proxy.yml

KAFKA_REST_ACCESS_CONTROL_ALLOW_ORIGIN: "*"
KAFKA_REST_ACCESS_CONTROL_ALLOW_METHODS: "GET,POST,PUT,DELETE"
KAFKA_REST_ACCESS_CONTROL_ALLOW_HEADERS: "origin,content-type,accept,authorization"