解决跨域导致session丢失以及多OPTIONS请求问题

解决跨域导致session丢失以及多OPTIONS请求问题。
正常来讲,在服务器端允许跨域,只需设置如下即可:

response.setHeader("Access-Control-Allow-Origin", "*"); 
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); 
response.setHeader("Access-Control-Allow-Headers", "x-requested-with"); 

但是跨域时,session会引起丢失,express里每次给客户端发放cookie后,客户端都反不回来,所以,每次都像是一个新的提交。所以跨域的设置第一行应改为如下:
res.header("Access-Control-Allow-Origin", "http://192.168.1.240"); //不能为*了,必须指定
response.setHeader("Access-Control-Allow-Credentials","true"); //是否支持cookie跨域

相应Angular4中在发起请求时,也应该在头部如下设置:

let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
let options = new RequestOptions({headers: headers, withCredentials: true});
return this.http.post(submitUrl, params, options)....

参考如下:
angular跨域和session失效问题

OPTIOP请求问题,因为跨域,在RFC文档中有说明,客户端会先发起一个OPTIONS请求,因为我们的POST请求的头部表明了Content-Type类型是application/json,不是以下之一:

  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

所以会引起OPTIONS请求,经过我不断尝试,还是没有达到我请求类型为application/json,而不发起OPTIONS请求的目的,所以最终正常将请求类型改为application/x-www-form-urlencoded,这样一来,我客户端的payload序列化后就变成了属性名,我只能在服务器端取到这个属性名再反序列化。

http.post(submitUrl, params, options) // params即是序列化后的json对象

服务器端

var mybody = req.body;
for(var key in mybody){
    break;
}
var params = JSON.parse(key); // params 即是反序列化后的json对象

我知道很恶心,但是只能暂时这样。

相关阅读及参考:

  • 记一次 CORS 跨域请求出现 OPTIONS 请求的问题及解决方法
  • CORS 中的POST and OPTIONS 请求
  • fetch进行post请求为什么会首先发一个options 请求?
  • HTTP access control (CORS)
  • Fetch
  • Http请求中Content-Type讲解以及在Spring MVC中的应用

你可能感兴趣的:(解决跨域导致session丢失以及多OPTIONS请求问题)