TypeScript 中的 JQuery POST 请求答案

【问题标题】：JQuery POST request in TypeScriptTypeScript 中的 JQuery POST 请求
【发布时间】：2017-09-06 13:51:24
【问题描述】：

我正在尝试使用 TypeScript 和 JQuery（来自绝对类型）与 API 交谈。

let ajaxsettings: JQueryAjaxSettings = {
    url: this.url,
    contentType: "application/json",
    type: "POST",
    data: JSON.stringify(this.apiRequest),
    processData: false,
    success: ( data, textStatus, jQxhr ) => {
        console.log("Response:" + JSON.stringify(data));
    },
    error: ( jqXhr, textStatus, errorThrown ) => {
        console.log("Error Response; " + JSON.stringify(jqXhr));
    },
    headers: {
        "X-UserName": "blahblah",
        "X-Password": "blahblah"
    },
    beforeSend: (request) => {
        request.setRequestHeader("X-APIKey", "blahblahblah");
    }
};
$.ajax(ajaxsettings);

发出请求并查看 Fiddler 捕获的内容相当奇怪。

错误的 HTTP 动词，并且标头包含在 Access-Control-Request-Headers 中，而不是作为标准标头。

JQuery 3.2.0，以及来自Definitely Typed的最新index.d.ts。

我可以在 Fiddler 中创建一个 HTTP 请求：

我正在尝试创建的请求：

更新

我尝试过使用数据类型来绕过preflight checks：

contentType : "text/plain",
method: "POST",
type: "post",
dataType: "json",

更新 2

API 托管在 Visual Studio 2017 的 IIS Express 中（使用 .NET Core），网站使用 lite-server 托管。取出自定义标头时，此代码工作正常。

【问题讨论】：

这只是一个疯狂的猜测，但根据 jQury API 文档，您应该在 1.9 之前使用 method 来支持 type。
谢谢，我已将 type: 更改为 data: 但它仍然以 OPTIONS 而不是 POST 的形式出现
您能否创建一个最小示例，以便我们测试您的代码？ :)
stackoverflow.com/questions/1256593/…
我明白了，但是浏览器具有 .NET（或任何其他类型的）HTTP 客户端所没有的限制。您可以为非浏览器客户端保留该服务，并拥有另一个“代理/中继”服务，通过将来自浏览器的请求（包括 CORS 所需的一切）中继到真正的后端服务，以浏览器友好的方式公开它。

标签： jquery typescript typescript2.3

【解决方案1】：

这只是正常的CORS 工作。确保您从 API 所在的同一 URL/端口提供包含脚本的 html 站点。例如：

您的 Html/脚本应位于

http://localhost:1234/web/index.html

然后是 AJAX 调用

http://localhost:1234/api/Controller

应该没问题，因为发出请求的脚本来自同一个URL/端口，不需要做检查。

这样，您应该避免需要对浏览器进行飞行前检查，以确定请求是否根据 CORS 被授予访问权限。

或者，enable CORS in your API，但请确保您不公开 API 以供所有可能的 (Web-) 客户端调用，以防止滥用。

获得对 URL 的更多控制权的另一种可能途径是 switch to full IIS，即使在您的 DEV 机器上也是如此，但可能还有其他/更好的方法来实现这一点（我本人对托管 .NET Core 并没有那么深入ATM 提供更好的样品，但其他人可能）

【讨论】：