前端对所有文件请求添加header_ajax请求添加自定义header参数代码

本文详细介绍了如何在前端使用Ajax进行跨域请求时添加自定义Header参数,包括设置`withCredentials`、`Access-Control-Allow-Origin`、`Access-Control-Allow-Credentials`等关键配置。同时,文章通过示例代码展示了跨域携带cookie和自定义请求头的处理方法,以及在Java后端的实现。最后,文章还提到了jsonp作为跨域的另一种解决方案。
摘要由CSDN通过智能技术生成

我就废话不多说了,大家还是直接看代码吧~

$.ajax({

type: "post",

url:"http://127.0.0.1:4564/bsky-app/template/testPost",

contentType: "application/json;charset=utf-8",

data :JSON.stringify({"bodyName":"sdfsdf","date":"2017-11-28 07:34:01","price": 10.5,"tbId": 1}),

dataType: "json",

beforeSend: function (XMLHttpRequest) {

XMLHttpRequest.setRequestHeader("token", "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxOD.....");

},

success: function (data) {

alert(data);

},error:function(error){

console.log(error);

}

});

beforeSend: function (XMLHttpRequest) {

XMLHttpRequest.setRequestHeader("token", "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxOD.....");

},

其中,token是服务端自定义的header参数

补充知识:ajax请求携带cookie和自定义请求头header(跨域和同域)

ajax请求携带cookie、自定义header总结:

错误:

1.ajax请求时是不会自动带上cookie的,要是想让他带上的话,必须设置withCredential为true。

正确:

1.ajax同域请求下,ajax会自动带上同源的cookie;

2.ajax同域请求下,ajax添加自定义请求头(或原装)header,前端、后台不需要增加任何配置,

并且不会因为增加自定义请求头header,而引起预检查请求(options);

3.ajax跨域请求下,如果不需要携带cookie、请求头header,只需要在后台配置相应参数即可;

后台参数:

(1).Access-Control-Allow-Origin:设置允许跨域的配置, 响应头指定了该响应的资源是否被允许与给定的origin共享;

4.ajax跨域请求下,ajax不会自动携带同源的cookie,需要通过前端配置相应参数才可以跨域携带同源cookie,后台配置相应参数才可以跨域返回同源cookie;

前端参数:

withCredentials: true(发送Ajax时,Request header中会带上Cookie信息)

后台参数:

(1).Access-Control-Allow-Origin:设置允许跨域的配置, 响应头指定了该响应的资源是否被允许与给定的origin共享;

特别说明:配置了Access-Control-Allow-Credentials:true则不能把Access-Control-Allow-Origin设置为通配符*;

(2).Access-Control-Allow-Credentials:响应头表示是否可以将对请求的响应暴露给页面(cookie)。返回true则可以,其他值均不可以。

5.ajax请求任何时候都不会带上不同源的cookie(Cookie遵循同源策略);

6.ajax跨域请求下,ajax添加自定义或者原装的请求头,请求会发送两次,第一次预检查请求,第二次正常请求,详细描述:

post(或GET)跨域请求时,分为简单请求和复杂请求,跨域携带自定义或者原装请求头头时是复杂请求。

复杂请求会先发送一个method 为option的请求,目的是试探服务器是否接受发起的请求. 如果服务器说可以,再进行post(或GET)请求。

对于java后台web应用,跨域需要添加一个过滤器(过滤器详见下面案例代码),这个过滤器做的事就是,加了几个http header在返回中,

Access-Control-Allow-Origin 我能接受的跨域请求来源,配置主机名

Access-Control-Allow-Headers 表示能接受的http头部,别忘了加入你自己发明创造的头部

Access-Control-Allow-Methods 表示能接受的http mothed ,反正就那几种,全写上也无妨,猥琐点就只写 post, options

如果是OPTION返回空,设置返回码为202,202表示通过。

需要前端配置相应参数才可以跨域携带请求头,后台配置相应参数进行跨域携带请求头;

前端参数:

crossDomain:true(发送Ajax时,Request header 中会包含跨域的额外信息,但不会含cookie(作用不明,不会影响请求头的携带))

后台参数(配置预检查过滤器):

(1)Access-Control-Allow-Origin:设置允许跨域的配置, 响应头指定了该响应的资源是否被允许与给定的origin共享;

(2)Access-Control-Allow-Credentials:响应头表示是否可以将对请求的响应暴露给页面(cookie)。返回true则可以,其他值均不可以;

(3)Access-Control-Allow-Headers:用于预检请求中,列出了将会在正式请求的 Access-Control-Request-Headers 字段中出现的首部信息。(自定义请求头);

(4)Access-Control-Allow-Methods:在对预检请求的应答中明确了客户端所要访问的资源允许使用的方法或方法列表;

亲测小结论:

1.ajax跨域请求下,后台不配置跨域Access-Control-Allow-Origin,同样能够执行后台方法,但是无法执行ajax的success的方法,控制台报跨域错误;

2.ajax跨域请求下,前端配置withCredentials: false,同样能够执行后台方法,但是无法携带同源cookie,后台无法获取;

3.ajax跨域请求下,前端配置withCredentials: true,后端没有配置Access-Control-Allow-Credentials:true,同样能够执行后台方法,并能够生成cookie并返回浏览器,但是无法执行ajax的success的方法,控制台报跨域错误;

4.ajax跨域请求下,前端配置withCredentials: fals

在进行ajax请求时,可以使用beforeSend属性来设置header。在示例代码中,在发送请求之前,通过beforeSend函数设置了一个名为"token"的header,并将值设置为"tokenvalue"。这样,在发送ajax请求时会在请求头中包含这个header,以提供身份验证或其他需要的信息。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [ajax请求设置header](https://blog.csdn.net/iamlihongwei/article/details/77775647)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [ajax请求携带自定义请求header(跨域和同域)](https://blog.csdn.net/weixin_42693104/article/details/129534388)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [毕设项目:基于springboot+mysql+ajax的网上借阅系统前端及后台.zip](https://download.csdn.net/download/dd_vision/88222312)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值