ajax请求json类型无法跨域传递cookie的问题解决

╰半夏微凉° 2022-05-29 12:09 276阅读 0赞

#### 问题描述： ####

在前后端分离的项目中，已经解决跨域问题，但是前端的POST请求一直被登录拦截掉。

> 在排查后发现，这个请求是一个POST请求 contentType: “application/json”。这是一种*复杂请求*  
> 在正式POST之前，浏览器会先发出一个OPTIONS请求（也叫preflight），同时header带上origin还有Access-Control-Request-*:\**之类的头，服务器响应会返回相应的access-control-allow-origin，如果匹配，那么浏览器就会发送正式POST，否则就会出现上述错误。这也解答了，跨域访问时，我们明明发送的post请求，失败的话，查看chrome network会发现是OPTIONS方法的原因。

#### 前端： ####

var params = "{}"   
            $.ajax({
              url: "http://127.0.0.1:8810/scheduleModel/page",
              type: 'POST',
              data: params,
              async: false,
              contentType: "application/json",
              dataType: "json",
              xhrFields: {
                withCredentials: true
                },
              success:function(res){
                console.log(res)
              },
              error:function(res){
                console.log(res)
              }
            });

#### 后端(Java) ####

> 对于出现这样的问题，可以在登录拦截的地方放过OPTIONS请求。

if("OPTIONS".equals(httpServletRequest.getMethod())){
        return true;
      }

#### OPTIONS请求 ####

> HTTP access control (CORS)OPTIONS请求旨在发送一种“探测”请求以确定针对某个目标地址的请求必须具有怎样的约束（比如应该采用怎样的HTTP方法以及自定义的请求报头），然后根据其约束发送真正的请求。比如针对“跨域资源”的预检（Preflight）请求采用的HTTP方法就是OPTIONS。