如何使用 js 或 jQuery 向 ajax 请求添加自定义 HTTP 标头答案

【问题标题】：How to add a custom HTTP header to ajax request with js or jQuery如何使用 js 或 jQuery 向 ajax 请求添加自定义 HTTP 标头
【发布时间】：2016-02-10 09:14:09
【问题描述】：

有谁知道如何使用 JavaScript 或 jQuery 添加或创建自定义 HTTP 标头？

我正在使用下面的代码，但它给了我405 Method not Allowed。我正在使用 POST 方法，但在请求方法中，但它在请求方法中向我显示 OPTION。状态代码：405 方法不允许，当我使用邮递员时，它正在工作并显示 200 ok 状态代码。有没有人帮助我这是怎么回事。我在 HTML 中使用下面的代码。

$(document).ready(function () {
    $.ajax( {
        url: 'http://api.XXXXXXXXXX.com/SharedServices/SharedData.svc/rest/Authenticate',
        data: {
            "ClientId": "ApiIntegration",
            "UserName": "XXXXX",
            "Password": "XXXXX@123",
            "EndUserIp": "192.168.1.10"
        },
        method: 'POST',
        dataType: 'json',
        headers: {
            "contentType": "application/json",
            "cache-control": "no-cache"},

        success: function (response) {
            console.log(response);
        },
    });
})

如果我的代码有问题，什么是正确的 jQuery 代码。这是我正在使用的邮递员女巫的截图。

【问题讨论】：

在这种情况下可能是 CORS 问题
这与标题无关。 OPTION 请求是确保接收域支持 CORS 的预检。从 405 响应看来它不是，因此由于同源策略，您正在尝试的内容在 JS 中不起作用。
"cache-control": "no-cache" — 你为什么要在 request 标头上设置它？！

标签： javascript jquery ajax

【解决方案1】：

当您发出跨域请求时，服务器必须提供access control headers (CORS) 以授予您的 JavaScript 读取响应的权限。

一个典型的请求被认为是简单，但是如果你给它添加某些特征，那么它就不再简单了，变成了preflighted request。

其中一个特征是“它在请求中设置自定义标头”，因此通过添加自定义标头，您会使其变得复杂。

在浏览器发出 POST 请求之前，它会发送预检请求，这是一个 OPTIONS 请求。

它必须先收到来自服务器的响应，允许它发出 POST 请求，然后才能发出 POST 请求。

当浏览器向服务器发出 OPTIONS 请求时，它当前会返回一条错误消息“您不允许向此 URL 发出 OPTIONS 请求！”。

您需要更改服务器以便：

接受 OPTIONS 请求
使用授予发出 POST 请求权限的标头进行响应

【讨论】：

@AjayKumar — 我的回答没有提及更改 jQuery 代码的原因是因为更改 jQuery 代码不是解决方案。解决方案在答案末尾的部分开始描述：您需要更改服务器。

【解决方案2】：

在 jQuery 代码中没有问题，这是因为您提出了跨源请求。尝试这样使用https://www.youtube.com/watch?v=EPSjxg4Rzs8

【讨论】：

始终欢迎提供指向潜在解决方案的链接，但请add context around the link，以便您的其他用户知道它是什么以及为什么存在。始终引用重要链接中最相关的部分，以防目标站点无法访问或永久离线。考虑到仅仅是指向外部站点的链接是Why and how are some answers deleted? 的一个可能原因。