使用 Axios 的带有凭据的 HTTP CORS 请求失败答案

【问题标题】：HTTP CORS requests with credentials are failing using Axios使用 Axios 的带有凭据的 HTTP CORS 请求失败
【发布时间】：2019-02-19 01:26:24
【问题描述】：

我有一个旧的 webforms asp.net 网站和一个新的 asp.net 核心网站共享一个身份验证 cookie。当我尝试使用 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，响应中包含以下消息

“请求格式无法识别，因为 URL 意外以 '/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 请求，然后第二个是成功到达 GetInformation 端点并返回 200 和 json 数据的 GET。

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

我尝试手动添加该标题，但也没有用：

    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 documentationdata的配置选项是

"仅适用于请求方法 'PUT'、'POST' 和 'PATCH'"

...我会同意的。

那么几个问题：

为什么添加空的data 对象会使这项工作有效？
为什么第一个示例不进行预飞行？
我在旧站点中的 CORS 设置看起来是否正常？

【问题讨论】：

问题中的 CORS 设置看起来不错，问题中引用的错误消息是 CORS 错误与 CORS 配置无关。这是一个不相关的错误

标签： typescript http axios asmx

【解决方案1】：

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

可能是因为Content-Type 自动添加了，因为提供了data。即使对于不发送有效负载的 GET 请求。
不会为"simple" request 发送预检。在 whilelist 之外没有任何标头的 GET 查询不需要发送预检。
根本原因与 CORS 无关（因为它在“特殊”流程中返回 200 OK，并且在“正常”流程中根本没有触及）

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

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

【讨论】：