typescript - 带有凭据的 HTTP CORS 请求使用 Axios 失败

Question

我有一个遗留的 webforms asp.net 网站和一个共享 auth cookie 的新的 asp.net 核心网站。当我尝试使用 Axios 从 Typescript(在核心站点中)向 Web 服务方法(在旧站点中)发出 CORS HTTP 请求时，它失败了除非 我传递了一个空数据对象。例如:

此请求将失败:

    const url: string = "http://legacy.mydev.machine:1259/MyService.asmx/GetInformation";
    const optionsThatWontWork: AxiosRequestConfig = {
        withCredentials: true
    };
    axios.get(url, optionsThatWontWork)
        .then((response) => { console.log(response); })
        .catch((error) => { console.log(error); });

浏览器执行 1 个 HTTP GET(无飞行前)请求，返回 HTTP 500，响应中包含以下消息

"Request format is unrecognized for URL unexpectedly ending in '/GetInformation'."

但这有效:

    const url: string = "http://legacy.mydev.machine:1259/MyService.asmx/GetInformation";
    const optionsThatWillWork: AxiosRequestConfig = {
        withCredentials: true,
        data: {
            // Adding this empty data object makes a difference
        }
    };
    axios.get(url, optionsThatWillWork)
        .then((response) => { console.log(response); })
        .catch((error) => { console.log(error); });

在这种情况下，浏览器发出 2 个请求。第一个是返回 200 的 HTTP OPTIONS 请求，第二个是 GET，它成功命中 GetInformation 端点并返回带有 json 数据的 200。

当比较 2 个 HTTP GET 消息时，我能看到的唯一区别是成功的消息有一个 Content-Type: application/json;charset=utf-8 header 。

我尝试手动添加该 header ，但这也不起作用:

    const optionsThatStillWontWork: AxiosRequestConfig = {
        withCredentials: true,
        headers: {
            "Content-Type": "application/json;charset=utf-8"
        },
    };

我已经使用 Microsoft.Owin.Cors 在遗留站点的 Owin 管道中配置了 CORS:

Private Sub ConfigureCors(ByVal app As IAppBuilder)
    Dim corsPolicy = New CorsPolicy() With {
        .AllowAnyMethod = True,
        .AllowAnyHeader = True,
        .SupportsCredentials = True,
        .AllowAnyOrigin = False
    }

    corsPolicy.Origins.Add("http://newsite.mydev.machine:9050")

    Dim corsPolicyProvider = New CorsPolicyProvider With {
        .PolicyResolver = Function(context) Task.FromResult(corsPolicy)
    }

    Dim options = New CorsOptions With {
        .PolicyProvider = corsPolicyProvider
    }

    app.UseCors(options)
End Sub

注意:http://legacy.mydev.machine:1259 和 http://newsite.mydev.machine:1259 在我的目录中都有条目hosts 文件指向 127.0.0.1。

根据 the axios documentation data 配置选项是

"Only applicable for request methods 'PUT', 'POST', and 'PATCH'"

...我同意这一点。

那么几个问题:

1. 为什么添加空的 data 对象可以做到这一点？
2. 为什么第一个示例不进行飞行前检查？
3. 我在旧站点中的 CORS 设置看起来正常吗？

Answer 1

这似乎是服务器端代码中的一个问题。

1. 可能是因为 Content-Type 自动添加，因为提供了 data。即使对于不发送负载的 GET 请求也是如此。
2. 未为 "simple" request 发送预检.在 whilelist 之外没有任何 header 的 GET 查询不需要发送预检。
3. 根本原因与 CORS 无关(因为它在“特殊”流程中返回 200 OK，因为它在“正常”流程中根本没有被触及)

我认为检查处理请求的 Controller 代码是有意义的。假设应该明确指定内容类型。

顺便说一句，如果 CORS 预检失败，则 GET 请求不会出现 500 内部服务器错误。 OPTIONS 预检将失败，下一步将不会有 GET 请求。