Reactjs Ktor后端的CORS问题

我正在创建一个完整的堆栈应用程序，后端用Ktor（Kotlin）开发，前端用React（TypeScript）开发。后端托管在Heroku上，而前端仍在开发中，因此我在本地运行它

当与邮递员一起测试时，API是可操作的，并按预期工作。这是Ktor配置的例外：

@抑制（“未使用”）
@kotlin.jvm.jvm重载
fun Application.module（测试：Boolean=false）{
安装（CORS）{
anyHost（）
}
安装（状态页）{
//状态页配置
}
安装（内容协商）{
杰克逊{
启用（SerializationFeature.INDENT_输出）
禁用（序列化功能。将日期写入时间戳）
禁用（反序列化功能。在忽略的属性上失败）
}
}
路由{
//路线申报
}
}

我启用了CORS，允许每个主机访问资源

在React应用程序中，我使用

axios

作为我的HTTP库。这是对服务器的请求的示例：

接口登录模型{
电子邮件：字符串；
密码：字符串；
}
接口令牌模型{
成功：布尔；
访问令牌：字符串；
}
从“axios”导入*作为axios；
const requestConfig={
标题：{
“内容类型”：“应用程序/json”，
“访问控制允许来源”：“*”
},
超时：15000
};
异步登录（登录名：LoginModel）：承诺{
const req=wait axios.default.post（'some-url'，login，requestConfig）；
如果（request.status==200）{
将request.data作为TokenAuthModel返回；
}
返回null；
}

返回以下错误消息：

访问位于“”的XMLHttpRequesthttps://app-name.herokuapp.com/some/endpoint“起源”http://localhost:3000'已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在'access control Allow Origin'标头

如上所述，错误仅在从React前端发出请求时出现，而邮递员呼叫按预期工作

---

非常感谢您提供的任何帮助。

您必须从Kotlin后端将您的源代码（localhost:3000）列入白名单。

我将此用于cors：

install(CORS) {
        method(HttpMethod.Options)
        method(HttpMethod.Put)
        method(HttpMethod.Delete)
        method(HttpMethod.Patch)
        header(HttpHeaders.Authorization)
        header(HttpHeaders.ContentType)
        // header("any header") if you want to add any header
        allowCredentials = true
        allowNonSimpleContentTypes = true
        anyHost()
    }

---

以下内容适用于我的设置（Ktor/axiom也适用）：

可能有点过分了，但我刚刚遇到了同样的问题，

No'accesscontrolalloworigin'…

我就是这样解决的。不需要CORS代理

---

通过ktor源代码进行的调试表明，缺少

头文件（HttpHeaders.AccessControlAllowOrigin）

是主要问题。

即使将

localhost

与

host（“localhost:3000”）

白名单后，客户端仍然会出现相同的错误。

fun Application.cors() {
    install(CORS) {
        method(HttpMethod.Options)
        method(HttpMethod.Put)
        method(HttpMethod.Delete)
        method(HttpMethod.Patch)
        header(HttpHeaders.Authorization)
        header(HttpHeaders.AccessControlAllowOrigin)
        allowNonSimpleContentTypes = true
        allowCredentials = true
        allowSameOrigin = true
        host(frontendHost, listOf("http", "https")) // frontendHost might be "*"
        logger.info { "CORS enabled for $hosts" }
    }
}