使用合流云和Kafka阻止CORS策略阻止API请求

Question

我试图在融合云上的Kafka集群上发布一条信息。它在邮递员上运行得很好，但是当我试用我的Svelte应用程序时，我得到了以下错误：

从原点获取 'http://localhost:3000‘的访问已被CORS策略阻止:对飞行前请求的响应不通过访问控制检查:请求的资源上不存在“访问控制-允许-原产地”报头。如果不透明响应满足您的需要，请将请求的模式设置为“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放大：上

​

​

在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进行的OPTIONS调用，或者通过Postman显式地进行OPTIONS调用，您将看到没有CORS响应头。这意味着默认情况下，Cloud提供的用于与Kafka集群交互的REST并不打算由浏览器访问。让它工作的唯一方法是将您的Confluent引导服务器放在与您的Web相同的域中，并且考虑到Confluent作为托管服务提供的抽象，如果可能的话，它肯定会带来更大的麻烦。

考虑一下:假设您成功地从Web中直接生成了卡夫卡主题的记录。这意味着您的api密钥和秘密将被捆绑到前端代码中，对于一个糟糕的参与者来说，这将是微不足道的，然后用来发起DOS攻击。见这个StackOverflow问题。

最好的方法是从前端调用一些安全API，并让服务器包含凭证。从这里开始，将记录生成到合流云中是非常简单的，因为它们有许多可用的SDK。如果您还没有设置API或不想为此创建专用端点，则可以使用合流REST代理。设置起来很简单：

1. 在服务器上运行代理，安装Java
2. 安装码头
3. 遵循教程说明在这里发现的
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"

Answer 2

关于应用程序是如何设置的，没有太多的细节，我也不是融合云的专家。

但是，如果您的Svelte应用程序在http://localhost:3000中运行，并且它试图发送请求以汇合Cloud (我假设这是示例中所示的端点)，那么您应该在Cloud端进行CORS配置，以支持从该应用程序到Confluent的通信。

如何配置汇流端，不幸的是，不知道这一点。