react项目请求无法自动携带上一次请求的JSESSIONID

cv大师_ly

于 2024-03-04 16:27:26 发布

阅读量670

点赞数 7

分类专栏：前端文章标签： react.js 状态模式前端

本文链接：https://blog.youkuaiyun.com/weixin_28717693/article/details/136455777

版权

前端专栏收录该内容

5 篇文章

订阅专栏

存在问题

页面依次发起多次请求，服务端会根据有无携带Set-Cookie从而生成新的JSESSIONID返回，前端需要在后续请求自动携带该值（浏览器行为，无需代码控制）

但目前的情况为：前端请求无法自动携带，每次都生成新的JSESSIONID,导致服务端无法判断是否同一用户。

分析问题：

问题修改：

前端：

本地开启跨域配置

  proxy: {
    '/server': {
      target: 'http://192.168.1.80:8080/',
      changeOrigin: true,
      secure: false,
      pathRewrite: { '^/server': '' },
    },
  },

请求库设置允许跨域携带cookie

axios

// 请求配置文件
const config = {
  baseURL: domain,
  timeout: 1000 * 15,
  withCredentials: true,
  maxRedirects: 3,
  headers: {
    "Content-Type": " application/json;charset=UTF-8",
  },
};

// 创建ajax实例
const instance = axios.create(config);

request

  const defaultOptions = {
    credentials: 'include',
  };
  const newOptions = { ...defaultOptions, ...options };

return fetch(url, newOptions)
    .then(checkStatus)
    .then(response => cachedSave(response, hashcode))
    .then(response => {
      // DELETE and 204 do not return data by default
      // using .json will report an error.
      if (newOptions.method === 'DELETE' || response.status === 204) {
        return response.text();
      }
      return response.json();
    })

后端

httpServletResponse.setHeader("Access-Control-Allow-Origin",httpServletRequest.getHeader("origin"));
httpServletResponse.setHeader("Access-Control-Allow-Credentials","true");
httpServletResponse.setHeader("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With,X-App-Id, X-Token");
httpServletResponse.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
httpServletResponse.setHeader("Access-Control-Max-Age", "3600");