如何在 Jquery Ajax 中向请求添加标头?

How to add header to request in Jquery Ajax?(如何在 Jquery Ajax 中向请求添加标头?)
本文介绍了如何在 Jquery Ajax 中向请求添加标头?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试使用 JQuery 在 Ajax 中为请求添加标头.

下面是代码:-

$.ajax({类型:发布",内容类型:应用程序/json",url: "http://localhost:8080/core-service/services/v1.0/patients/registerPatients",数据:JSON.stringify(耐心DTO),//跨域:真,数据类型:'json',标头:{X-AUTH-TOKEN":tokken},成功:功能(耐心DTO){console.log("成功:", PatientDTO);/* location.href = "fieldagentHRA.html";*/如果(类型(存储)!==未定义"){localStorage.setItem("patUrn", patientDTO.data);location.href="fieldagentHRA.html";}},错误:函数(e){console.log("错误:", e);显示(e);},完成:函数(e){启用注册按钮(真);}});

我用 chrome 检查了这个,发现没有添加标题的正文.

然后我用

在两张图片中,请求标头 x-auth-token 都存在于ACCESS-CONTROL-REQUEST-HEADERS"中,但X-AUTH-TOKEN"标头以及标头值存在于第二张图片中,而第二张图片中不存在第一张照片.

所以我的问题是如何使用 JQuery 在 Ajax 中添加请求标头?

解决方案

有几个解决方案取决于你想做什么

<块引用>

如果想为单个请求添加自定义标头(或一组标头),只需添加 headers 属性,这将帮助您发送带有标头的请求.

//带有自定义标头的请求$.ajax({网址:'foo/bar',标题:{'x-my-custom-header':'一些值'}});

<块引用>

如果想为每个请求添加一个默认标头(或一组标头),请使用 $.ajaxSetup(): 这将帮助您添加标头.

//在此处设置标头,然后调用 ajax$.ajaxSetup({标题:{'x-my-custom-header':'一些值'}});//发送你的ajax$.ajax({ url: 'foo/bar' });

<块引用>

为每个请求添加一个标头(或一组标头),然后将 beforeSend 钩子与 $.ajaxSetup() 一起使用:

//在此处挂上您的标头并使用发送前功能进行设置.$.ajaxSetup({发送前:函数(xhr){xhr.setRequestHeader('x-my-custom-header', '一些值');}});//发送你的ajax$.ajax({ url: 'foo/bar' });

<块引用>

参考链接:AjaxSetup

参考链接:AjaxHeaders

I'm trying to add header to request in Ajax with JQuery.

Below is the code :-

$.ajax({
    type: "POST",
    contentType: "application/json",
    url: "http://localhost:8080/core-service/services/v1.0/patients/registerPatients",
    data: JSON.stringify(patientDTO),
    //crossDomain : true,
    dataType: 'json',
    headers: {"X-AUTH-TOKEN" : tokken},
    success: function(patientDTO) {
        console.log("SUCCESS: ", patientDTO);
        /* location.href = "fieldagentHRA.html";*/
        if (typeof(Storage) !== "undefined") {
            localStorage.setItem("patUrn", patientDTO.data);
            location.href="fieldagentHRA.html";
        }
    },
    error: function(e) {
    console.log("ERROR: ", e);
    display(e);
    },
    done: function(e) {
    enableRegisterButton(true);
    }
});

I inspected this with chrome and found that header's body is not being added.

Then I used Requestly (Requestly is chrome+firefox plugin with which we can manually add a header to the request).

After manually adding header :-

In both the pics request header x-auth-token is present in "ACCESS-CONTROL-REQUEST-HEADERS" but "X-AUTH-TOKEN" header along with header value is present in second pic which is not there in the first pic.

So my question is how to add request headers in Ajax with JQuery ?

解决方案

There are couple of solutions depending on what you want to do

If want to add a custom header (or set of headers) to an individual request then just add the headers property and this will help you to send your request with headers.

// Request with custom header
$.ajax({
    url: 'foo/bar',
    headers: { 'x-my-custom-header': 'some value' }
});

If want to add a default header (or set of headers) to every request then use $.ajaxSetup(): this will help you to add headers.

//Setup headers here and than call ajax
$.ajaxSetup({
    headers: { 'x-my-custom-header': 'some value' }
});

// Sends your ajax
$.ajax({ url: 'foo/bar' });

add a header (or set of headers) to every request then use the beforeSend hook with $.ajaxSetup():

//Hook your headers here and set it with before send function.
$.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader('x-my-custom-header', 'some value');
    }
});

// Sends your ajax
$.ajax({ url: 'foo/bar' });

Reference Link : AjaxSetup

Reference Link : AjaxHeaders

这篇关于如何在 Jquery Ajax 中向请求添加标头?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Laravel 5.3 with Vuejs ajax call尝试使用 Vuejs 从数据库中获取一些数据。我的用户表中有一些虚拟数据。我想在我的视野中展示它们。问题是虽然页面加载,但...
Passing Data between react components(在Reaction组件之间传递数据)
How can I get the nearest date through moment.js?(怎样才能通过Moment.js获得最近的日期呢?)
Difference between two time using dayjs(使用DAYJS的两次时间之间的差异)
Tempus Dominus Bootstrap4 requires moment.js. (datetime picker)(Tempus Domus Bootstrap4需要minom.js。(日期时间选取器))
React/Momentjs date formatting with line break(带换行符的Reaction/Momentjs日期格式)