Reactjs 使用CORS异常直接从react应用程序错误调用kubernetes api

我在本地启动了一个“createreact-app”实例（

localhost:3000

）。 我添加了一个按钮组件，该组件调用K8SAPI的getpods命令。使用本地

docker desktop

k8s群集和代理（

kubectl代理--端口=8080

）：

从“/Api.js”导入{getPods}
从“React”导入React，{Component}
导出默认功能按钮（道具）{
常量api=”http://localhost:8080";
const namespace='my_namespace'；
const respose=async（）=>{const a=await-getPods（api，null，命名空间）；console.log（a）}；
返回（单击我）；
}

以及

getPods

功能：

导出异步函数getPods（主机、令牌、命名空间）{
const response=wait fetch（`${host}/api/v1/namespace/${namespace}/pods`{
方法：“get”，
标题：{
“访问控制允许来源”：“*”，
“访问控制允许方法”：“获取、发布、放置、删除、选项”
}
});
控制台日志（响应）；
返回响应
}

当我试图从浏览器（运行

npm start

）使用react应用程序时，出现以下错误：

Access to fetch at 'http://localhost:8080/api/v1/namespaces/my-namespace/pods' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

---

我可以做些什么来禁用CORS吗？

选项1：尝试安装chrome插件，例如（这可能是chrome仅在开发模式下出现的问题）

选项2：在您的api中设置一个自定义路由（假设您有），为您进行调用，然后从站点调用您自己的路由

---

（其他人可能也会建议其他选项，但这是一个不错的起点）

选项1没有解决问题，我不太明白您对选项2的意思。你能澄清一下吗？通常cors错误只会阻止浏览器到服务器的交互。如果您设置自己的路由，基本上作为kubernetes的代理，那么它可能会工作，因为现在是服务器到服务器。如果您使用CRA，这可能很难做到，因为您没有管理自己的服务器（至少是现成的）。但是有很多文章介绍了如何将CRA与自定义express服务器结合使用。