HTTP简单请求和非简单请求1

简单请求和非简单请求1


1、浏览器发送跨域请求,如何判断?

    浏览器在发送跨域请求的时候,会先判断下是简单请求还是非简单请求,如果是简单请求,就先执行服务端程序,然后浏览器才会判断是否跨域

2、简单请求


(1)工作中比较常见 【简单请求】:

       方法为:GET

                     HEAD

                     POST

(2)请求header里面:

              无自定义头

              Content-Type为以下几种:

                    text/plain

                    multipart/form-data

                    application/x-www-form-urlencoded

3、非简单请求

    工作中常见的【非简单请求】有:

        put,delete方法的ajax请求

        发送json格式的ajax请求

        带自定义头的ajax请求

4、POST JSON请求

(1)postJson请求出现了跨域问题

13547563-622ba3af65f0f2bd.png

postJson请求出现了跨域问题


(2)前端代码

13547563-b164582d7463bda2.png

index.html代码

                    // 测试jsonPost方法

                     it("测试jsonPost方法", function(done) {

                            //服务器返回的结果

                            varresult;

 

                            $.ajax({

                                   url:base +"/postJson",

                                   dataType:"json",

                                   type:"post",

                                   contentType:"application/json;charset=utf8",

                                   data:JSON.stringify({name: "postJson wwl"}),

                                   success:function(json){

                                          result= json;

                                   }

                            });

 

                            //由于是异步请求,需要使用setTimeout来校验

                            setTimeout(function(){

                                   expect(result).toEqual({

                                          "data": "postJson wwl"

                                   });

 

                                   //校验完成,通知jasmine框架

                                   done();

                            },100);

                     });

(3)后端代码

13547563-61da5e7a54852b9a.png

AjaxController代码

    @PostMapping("/postJson")

    @ResponseBody

   public ResultBean postJson(@RequestBody User user){

       System.out.println("AjaxController.postJson()");

       ResultBean resultBean = new ResultBean(user.getName());

       return resultBean;

}

5、解决POSTJSON请求跨域问题

(1)出现了跨域问题

13547563-11d395adeb15a020.png

出现了跨域问题

(2)后端在响应头中添加Access-Control-Allow-Headers字段

13547563-695f4d5166906b81.png

添加Access-Control-Allow-Headers字段

res.addHeader("Access-Control-Allow-Headers", "Content-Type");

(3)验证是否解决跨域

这里有两个postJson请求:

OPTIONS表示预检命令,如果预检通过之后,才会发送POST请求到服务端

13547563-4e5c509a3b022112.png

验证成功,没有出现跨域报错信息

这里只有一个postJson请求,因为后台程序没有在响应头里添加res.addHeader("Access-Control-Allow-Headers", "Content-Type")字段

OPTIONS预检未通过,就不会发送POST请求到服务端

13547563-54dd9afc1a32de13.png

OPTIONS预检未通过,就不会发送POST请求到服务端

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值