浏览器跨域 - Githubissues

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

只要同时满足以下两大条件，就属于简单请求。

（1) 请求方法是以下三种方法之一：

HEAD
GET
POST

（2）HTTP的头信息不超出以下几种字段：

Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

凡是不同时满足上面两个条件，就属于非简单请求。浏览器对这两种请求的处理，是不一样的。

参考：跨域资源共享详解 CORS [http://www.ruanyifeng.com/blog/2016/04/cors.html]

简单请求

前端：

 $.ajax({
        type: "POST",
        url: "http://XXX/testCORS",
        //contentType: "application/json;charset=UTF-8",使用默认的application/x-www-form-urlencoded
        dataType: "json",
        data: {},
        success: function () {
         }
  });

后端：

 router.post('/testCORS', function(req, res){
   res.setHeader('Access-Control-Allow-Origin', '*');
   res.send({msg:"success"});
})

非简单请求

前端（设置了contentType: "application/json;charset=UTF-8"）：

  $.ajax({
        type: "POST",
        url: "http://XXXX/testCORS",
        contentType: "application/json;charset=UTF-8",
        dataType: "json",
        data: {},
        success: function () {
         }
  });

后端（相比简单请求，多了OPTIONS的处理）：

 router.options('/testCORS', function(req, res){
   //res.setHeader('Access-Control-Allow-Methods', 'POST');
   res.setHeader('Access-Control-Allow-Origin', '*');//重要
   res.setHeader('Access-Control-Allow-Headers', 'content-type');//重要
   res.status = 204;
   res.send();
})
router.post('/testCORS', function(req, res){
   res.setHeader('Access-Control-Allow-Origin', '*');
   res.send({msg:"success"});
})

OhNaNaSun / myapp

浏览器跨域 #5

简单请求

非简单请求