jQuery.ajax跨域请求webapi设置headers的解决方案

2023年6月20日发(作者：)

跨域请求webapi设置headers的解决⽅案解决跨域调⽤服务并设置headers 主要的解决⽅法需要通过服务器端设置响应头、正确响应options请求，正确设置 JavaScript端需要设置的headers信息 ⽅能实现。1.第⼀步 服务端设置响应头,在webapi的做如下设置 1

2

3

4

5

6

7

8

9

10

11

2.第⼆部 了解IE chrome 等浏览器 对于 跨域请求并要求设置Headers⾃定义参数的时候的 "预请求" 就是如果遇到 跨域并设置headers的请求，所有请求需要两步完成！A 第⼀步：发送预请求 OPTIONS 请求。此时 服务器端需要对于OPTIONS请求作出响应 ⼀般使⽤202响应即可 不⽤返回任何内容信息。（能看到这份⼿稿的⼈，本⼈不相信你后台处理不了⼀个options请求）options请求可在权限拦截器中处理 1

2

3

4

5

6

7

8

9

10

11

12

13

14

///

/// 权限拦截器///

public class ApiAuthorizeAttribute : AuthorizeAttribute{public override void OnAuthorization(HttpActionContext actionContext){if( == s){se = Response(ed);return;}}}B 第⼆步：服务器accepted 第⼀步请求后 浏览器⾃动执⾏第⼆步 发送真正的请求。客户端代码： 1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

$("#btnSumit").click(function() {varTicket = $.cookie("token");varmodel = {id: 1};$.ajax({type:

"POST",url:

"",data: ify(model),contentType:

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

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

dataType:

"json",beforeSend:

function(xhr) {// //发送ajax请求之前向http的head⾥⾯加⼊验证信息uestHeader("token", Ticket);

// 请求发起前在头部附加token},success:

function(data, status) {if(code ==

"401") {alert();}else{alert(ify(data))}},//error: function (XMLHttpRequest, textStatus, errorThrown) {// alert();// alert(tate);// alert(textStatus);//},complete:

function() {}});});

2023年6月20日发(作者：)

跨域请求webapi设置headers的解决⽅案解决跨域调⽤服务并设置headers 主要的解决⽅法需要通过服务器端设置响应头、正确响应options请求，正确设置 JavaScript端需要设置的headers信息 ⽅能实现。1.第⼀步 服务端设置响应头,在webapi的做如下设置 1

2

3

4

5

6

7

8

9

10

11

2.第⼆部 了解IE chrome 等浏览器 对于 跨域请求并要求设置Headers⾃定义参数的时候的 "预请求" 就是如果遇到 跨域并设置headers的请求，所有请求需要两步完成！A 第⼀步：发送预请求 OPTIONS 请求。此时 服务器端需要对于OPTIONS请求作出响应 ⼀般使⽤202响应即可 不⽤返回任何内容信息。（能看到这份⼿稿的⼈，本⼈不相信你后台处理不了⼀个options请求）options请求可在权限拦截器中处理 1

2

3

4

5

6

7

8

9

10

11

12

13

14

///

/// 权限拦截器///

public class ApiAuthorizeAttribute : AuthorizeAttribute{public override void OnAuthorization(HttpActionContext actionContext){if( == s){se = Response(ed);return;}}}B 第⼆步：服务器accepted 第⼀步请求后 浏览器⾃动执⾏第⼆步 发送真正的请求。客户端代码： 1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

$("#btnSumit").click(function() {varTicket = $.cookie("token");varmodel = {id: 1};$.ajax({type:

"POST",url:

"",data: ify(model),contentType:

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

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

dataType:

"json",beforeSend:

function(xhr) {// //发送ajax请求之前向http的head⾥⾯加⼊验证信息uestHeader("token", Ticket);

// 请求发起前在头部附加token},success:

function(data, status) {if(code ==

"401") {alert();}else{alert(ify(data))}},//error: function (XMLHttpRequest, textStatus, errorThrown) {// alert();// alert(tate);// alert(textStatus);//},complete:

function() {}});});