前端使用代理跨域后后端无法接收Session

2021-08-28 18:33:26 阅读：195 来源： 互联网

标签：跨域 exploded 前端 server Session Cookie war 请求

将一个 MVC 项目重构为一个前后端分离项目，前端使用了 react + axios + vite...。

在前后端分离项目中，通常都会使用代理来解决跨域问题，vite 需要在 vite.config.js 文件中配置代理：

export default defineConfig({
  server: {
    // 代理配置
    proxy: {
      // 请求前缀
      '/api': {
        target: 'http://localhost:8080/server_war_exploded',
        // 开启跨域
        changeOrigin: true,
        // 正式请求时将前缀替换为空字符
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
})

配置了代理之后请求能过去了，但后端保存在 Session 中的用户信息无法拿到。检查发现请求头中并没有携带 Cookie，这是因为 axios 在跨域请求中是默认不提供凭据信息，也就是在跨域请求中不携带 cookie、HTTP认证及客户端SSL证明等。需要在 axios 中手动开启：

axios.defaults.withCredentials = true;

开启之后再次请求后检查请求头...嗯...好像携带 Cookie 进行请求了，但后端还是无法获取 Session，再检查发现这个 Cookie 的作用范围不对，Path 是 /server_war_exploded。

set-cookie: JSESSIONID=DD2CCA381F1EA1AAEEE912E3DCDC5A43; Path=/server_war_exploded; HttpOnly

将代理中请求的前缀改为 /server_war_exploded 再次发送请求就可以了

export default defineConfig({
  server: {
    // 代理配置
    proxy: {
      '/server_war_exploded': {
        target: 'http://localhost:8080/server_war_exploded',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/server_war_exploded/, '')
      }
    }
  }
})

这是因为没改之前你请求的时候地址看着是 http://localhost:3000/api/login ，而 Cookie 作用于 /server_war_exploded 所以你的请求无权访问 Cookie。修改之后请求地址看着就是 http://localhost:3000/server_war_exploded/login 。

下面是请求使用代码：

private onFinish = (values: {[index: string]: any}) => {

  this.context.http.post('/server_war_exploded/login', {}, {
    params: {
      '__method__': 'doLogin',
      ...values
    }
  })
    .then((response: AxiosResponse) => {
      const {data} = response;
      console.log(data)
    })
    .catch((err: any) => {
      console.log(err)
    })
};

后端使用 Session 保存用户登录信息，那么后端是如何确定当前会话对应的是哪一个 Session 你知道吗？

在每一次请求中，其实浏览器都会默认携带一个 Cookie JSESSIONID ，这个 Cookie 记录了一大串乱七八糟的字符串，后端就是通过这个字符串来确定一个会话的 Session 对象的。

标签：跨域,exploded,前端,server,Session,Cookie,war,请求
来源： https://www.cnblogs.com/CloverYou/p/15200768.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端使用代理跨域后后端无法接收Session