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请求出现了跨域问题

HTTP简单请求和非简单请求1_第1张图片

postJson请求出现了跨域问题


(2)前端代码

HTTP简单请求和非简单请求1_第2张图片

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)后端代码

HTTP简单请求和非简单请求1_第3张图片

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)出现了跨域问题

HTTP简单请求和非简单请求1_第4张图片

出现了跨域问题

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

HTTP简单请求和非简单请求1_第5张图片

添加Access-Control-Allow-Headers字段

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

(3)验证是否解决跨域

这里有两个postJson请求:

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

HTTP简单请求和非简单请求1_第6张图片

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

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

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

HTTP简单请求和非简单请求1_第7张图片

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

你可能感兴趣的:(Ajax跨域)