TypeScript中的JQuery POST请求

Question

我尝试使用TypeScript和JQuery（来自Definitely Typed）与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请求：

我尝试创建的请求：

更新

我已经尝试过使用dataType来解决preflight checks：

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

更新2

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

Answer 1

这正常CORS正在开展工作。 确保您从API所在的相同URL /端口提供包含脚本的html站点。 e.g：

您的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提供更好的样本，但其他人可能）