ajax跨域请求保持session一致

本文介绍了一种通过自定义过滤器和前端配置实现跨域请求时保持SessionID的方法,确保跨域访问同一会话。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

根据浏览器的保护规则,跨域的时候我们创建的sessionId是不会被浏览器保存下来的,这样,当我们在进行跨域访问的时候,我们的sessionId就不会被保存下来,也就是说,每一次的请求,服务器就会以为是一个新的人,而不是同一个人,为了解决这样的办法,下面这种方法可以解决这种跨域的办法。


我们自己构建一个拦截器,对需要跨域访问的request头部重写


1、写一个filter并在web.xml中注册

package com.baidu.filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CrosFilter implements Filter{

	@Override
	public void destroy() {
		// TODO Auto-generated method stub
		
	}

	@Override
	public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse) servletResponse;
        HttpServletRequest request=(HttpServletRequest)servletRequest;
        res.setContentType("textml;charset=UTF-8");
        res.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        res.setHeader("Access-Control-Max-Age", "0");
        res.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");
        res.setHeader("Access-Control-Allow-Credentials", "true");
        res.setHeader("XDomainRequestAllowed","1");
        filterChain.doFilter(servletRequest,servletResponse);
    }

	@Override
	public void init(FilterConfig arg0) throws ServletException {
		// TODO Auto-generated method stub
		
	}

}

2、在前台访问的时候


在ajax 请求是也要加相应的东西
$.ajax({
url:url,
//加上这句话
xhrFields: {
           withCredentials: true
       },
       crossDomain: true,

success:function(result){
alert("test");
},
error:function(){
}
});


这样我们再跨域测试的时候,就会发现我们的sessionId是一样的了,这样就实现了跨域并且保证在同一个session下

在使用 `$.ajax` 发起 **请求** 时,要保持 **Session 会话状态**(即前后端之间能识别同一个用户),需要前后端都进行一些特定配置。否则,浏览器出于安全策略限制,默认不会发送或保留 Cookie,导致 Session 无法维持。 --- ### ✅ 前端配置:启用携带 Cookie 你需要在 `$.ajax` 请求中设置: ```javascript $.ajax({ url: 'https://api.example.com/login', type: 'POST', xhrFields: { withCredentials: true // 允许携带 cookie }, crossDomain: true, success: function(data) { console.log('登录成功'); } }); ``` #### 关键参数说明: - `withCredentials: true`:允许请求携带 Cookie; - `crossDomain: true`:显式声明这是一个请求; - 如果你使用了 `dataType: 'json'` 或其他类型,请确保后端返回的响应头也正确设置。 --- ### ✅ 后端配置:允许并设置 Cookie 后端必须设置以下 HTTP 响应头来允许前端访问,并且允许 Cookie 被携带。 #### 示例(Node.js + Express): ```js const express = require('express'); const session = require('express-session'); const cors = require('cors'); const app = express(); app.use(cors({ origin: 'https://your-frontend-domain.com', // 允许的源 credentials: true // 允许携带凭证(Cookie) })); app.use(session({ secret: 'keyboard cat', resave: false, saveUninitialized: true, cookie: { httpOnly: true, secure: false, // 开发环境设为 false;生产建议启用 HTTPS + secure: true sameSite: 'none' // 如果是请求,需设置 sameSite: 'none' } })); app.post('/login', (req, res) => { req.session.user = { id: 1, name: 'Alice' }; res.send('Logged in'); }); app.listen(3000); ``` #### 必须设置的响应头: ```http Access-Control-Allow-Origin: https://your-frontend-domain.com Access-Control-Allow-Credentials: true Set-Cookie: connect.sid=xxx; Path=/; HttpOnly; SameSite=None ``` > ⚠️ 注意: > - `Access-Control-Allow-Origin` **不能是** `*`,必须指定具体名; > - `SameSite=None` 需配合 `Secure` 使用(即启用 HTTPS); > - 如果是开发环境,可以先不启用 `Secure`。 --- ### ✅ 浏览器限制和注意事项 | 条件 | 是否影响 Session | |------|------------------| | 使用隐私浏览模式 | Cookie 不持久,每次刷新可能丢失 Session | | 禁用第三方 Cookie | 某些浏览器(如 Safari)默认阻止 Cookie | | 清除浏览器缓存 | 删除了 Cookie,Session 也会失效 | --- ### ✅ 完整流程图解 ``` 前端发起 $.ajax({ withCredentials: true }) ↓ CORS 请求到达后端 ↓ 后端设置 Set-Cookie 并允许 Access-Control-Allow-Credentials ↓ 浏览器保存 Cookie(如果符合规则) ↓ 下次请求自动携带 Cookie(Session ID) ↓ 后端识别 Session保持登录状态 ``` --- ### ✅ 总结 | 步骤 | 内容 | |------|------| | 前端 | 设置 `withCredentials: true` 和 `crossDomain: true` | | 后端 | 设置 CORS 允许来源 + `credentials: true` + 正确设置 Cookie 属性 | | 协议 | 前后端协议、名、端口一致或正确处理 | | Cookie | 设置 `SameSite=None; Secure`(生产环境) | ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值