Ktor 后端的 CORS 问题

Question

我正在创建一个全栈应用程序，后端使用 Ktor (Kotlin) 开发，前端使用 React (TypeScript) 开发。后端托管在 Heroku 上，而前端仍在开发中，因此我在本地运行它。

当使用 Postman 进行测试时，该 API 可以正常运行并按预期工作。这是 Ktor 配置的摘录：

@Suppress("unused")
@kotlin.jvm.JvmOverloads
fun Application.module(testing: Boolean = false) {

    install(CORS) {
        anyHost()
    }

    install(StatusPages) {
        // Status pages configuration
    }

    install(ContentNegotiation) {
        jackson {
            enable(SerializationFeature.INDENT_OUTPUT)
            disable(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS)
            disable(DeserializationFeature.FAIL_ON_IGNORED_PROPERTIES)
        }
    }

    routing {
        // Declaration of routes
    }
}

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

在 React 应用程序中，我使用它axios作为我的 HTTP 库。这是向服务器发出请求的示例：

interface LoginModel {
    email: string;
    password: string;
}

interface TokenAuthModel {
    successful: boolean;
    access_token: string;
}

import * as axios from 'axios';

const requestConfig = {
    headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*'
    },
        timeout: 15000
};

async login(login: LoginModel): Promise<TokenAuthModel | null> {
    const req = await axios.default.post('some-url', login, requestConfig);
    if (request.status === 200) {
        return request.data as TokenAuthModel;
    }
    return null;
}

它返回以下错误消息：

从源“http://localhost:3000”访问“https://app-name.herokuapp.com/some/endpoint”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

如上所述，该错误仅在从 React 前端发出请求时出现，而 Postman 调用按预期工作。

任何形式的帮助将不胜感激。

Answer 1

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

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" }
    }
}

可能有点过分，但我刚刚遇到了同样的问题No 'Access-Control-Allow-Origin' ...，这就是我解决的方法。不需要 CORS 代理。

通过 ktor 源进行调试表明，缺乏header(HttpHeaders.AccessControlAllowOrigin)是主要问题。

Answer 2

我用这个来做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()
    }