Eggjs笔记:解决API接口跨域请求时cookie和session失效的问题

问题的出现

当我们打开浏览器访问,从一个页面跳转到另一个页面,session中的信息仍可以正常访问,为什么在请求API接口的时候, 一个接口可以访问到,另一个却无法访问到session中的信息了呢? 其实这个问题很简单,session是基于cookie的,浏览器可以在访问的时候通过cookie来确认用户权限,而接口API的直接访问是没有cookie等信息的, 这里涉及到一个cookie跨域的问题,所以无法获取session的信息,那如何在API接口中共享session信息呢?解决方案就是前端+后端的方式来支持API的跨域访问,下面我们具体来看下

问题的解决

后端配置

在跨域配置中新增credentials参数如下:

// 配置 跨域
config.cors = {
    origin: 'http://localhost:8080', // 这里的地址要配置具体的客户端地址,* 会有问题,另外:如果是App这种,内部使用的file协议,那么file请求接口是不会有跨域问题的
    credentials: true // 支持cookie跨域
};

前端配置

加入{credentials:true}参数

var api="http://127.0.0.1:7001/api/login"
this.$http.get(api,{credentials:true}).then((response)=>{
  console.log(response);
},(err)=>{
  console.log(err);

})

这里特别说明下:如果是jQuery的话,使用setup来做全局配置,如果是vue,react等需要封装一个拦截器,专门用来做全局配置,避免在单个接口中传递,上面只是举例

猜你喜欢

转载自blog.csdn.net/Tyro_java/article/details/106568898