跨域请求传递Cookie问题

问题描述

前后端完全分离的项目,前端使用Vue + axios,后端使用SpringMVC,容器为Tomcat。

使用CORS协议解决跨域访问数据限制的问题,但是发现客户端的Ajax请求不会自动带上服务器返回的Cookie:JSESSIONID。

导致每一个Ajax请求在服务端看来都是一个新的请求,都会在服务端创建新的Session(在响应消息头中设置Set-Cookie:JSESSIONID=xxx)。

而在项目中使用了Shiro框架,用户认证的信息是放在Session中的,由于客户端不会把JSESSIONID返回给服务器端,因此使用Session策略存放数据的方式不可用。

解决方案

需要从2个方面解决:

1.服务器端使用CROS协议解决跨域访问数据问题时,需要设置响应消息头Access-Control-Allow-Credentials值为“true”。

同时,还需要设置响应消息头Access-Control-Allow-Origin值为指定单一域名(注:不能为通配符“*”)。

@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
        throws IOException, ServletException {
    HttpServletRequest req = (HttpServletRequest)request;
    HttpServletResponse resp = (HttpServletResponse)response;

    String origin = req.getHeader("Origin");
    if(origin == null) {
        origin = req.getHeader("Referer");
    }
    resp.setHeader("Access-Control-Allow-Origin", origin);            // 允许指定域访问跨域资源
    resp.setHeader("Access-Control-Allow-Credentials", "true");       // 允许客户端携带跨域cookie,此时origin值不能为“*”,只能为指定单一域名

    if(RequestMethod.OPTIONS.toString().equals(req.getMethod())) {
        String allowMethod = req.getHeader("Access-Control-Request-Method");
        String allowHeaders = req.getHeader("Access-Control-Request-Headers");
        resp.setHeader("Access-Control-Max-Age", "86400");            // 浏览器缓存预检请求结果时间,单位:秒
        resp.setHeader("Access-Control-Allow-Methods", allowMethod);  // 允许浏览器在预检请求成功之后发送的实际请求方法名
        resp.setHeader("Access-Control-Allow-Headers", allowHeaders); // 允许浏览器发送的请求消息头
        return;
    }

    chain.doFilter(request, response);
}

2.客户端需要设置Ajax请求属性withCredentials=true,让Ajax请求都带上Cookie。

  • 对于XMLHttpRequest的Ajax请求

    var xhr = new XMLHttpRequest();
    xhr.open(‘GET‘, url);
    xhr.withCredentials = true; // 携带跨域cookie
    xhr.send();
  • 对于JQuery的Ajax请求
    $.ajax({
    type: "GET",
    url: url,
    xhrFields: {
        withCredentials: true // 携带跨域cookie
    },
    processData: false,
    success: function(data) {
        console.log(data);
    }
    });
  • 对于axios的Ajax请求
    axios.defaults.withCredentials=true; // 让ajax携带cookie

【参考】

http://harttle.com/2016/12/28/cors-with-cookie.html CORS 跨域发送 Cookie

https://segmentfault.com/q/1010000009193446 vuejs (前端项目) + spring mvc(后台项目),每次ajax请求都是新的session Id

https://www.w3.org/TR/cors/ Cross-Origin Resource Sharing

时间: 2024-11-08 05:28:19

跨域请求传递Cookie问题的相关文章

【原】fetch跨域请求附带cookie(credentials)

HTTP访问控制 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS 解决跨域的方式有很多种,本文介绍"跨域请求附带发送cookie" 一.测试环境 前提:后台使用apache+php实现.apache设置多个虚拟主机,设置方式参考:http://www.cnblogs.com/sivkun/p/7347978.html 在http://a.sivkun.com域中/cors-cookie/目录下有

ajax跨域请求带cookie

调用网站:a.xxx.com jQuery(document).ready(function () { $.ajax({ type: "get", async: true, url: "http://www.xxx.com/common/Index", //跨域请求的URL dataType: "html", xhrFields: { withCredentials: true }, crossDomain: true, success: fun

Ajax跨域请求,无法传递及接收cookie信息

最近在做一个系统遇到一个问题,在网上找个一个和我遇到相同问题的(原文地址:https://www.cnblogs.com/helloyy/p/6109665.html)按照他的步骤还是没有解决,继续查找资料,根据他的方法做出修改,最后解决.(不想写字就自己拿过来了..) 应用场景: 项目测试环境:前端应用HTML,js,jQuery ajax请求,部署在Apache服务器:后端业务系统应用spring mvc,mybatis,部署在tomcat服务器.当在一个系统需要调用另一个系统的时候,就会出

vue开发之跨域请求,请求头not allowed by Access-Control-Allow-Headers,后端cookie session值取不到(二)

原因:你本地的请求ajax的get和post请求:如果你的请求头内放一些可用验证数据Token的时候就会存在跨域请求这是浏览器所不允许的问题: 方案一:后台的接口请求模式都写成jsonp请求,前端去调用: 特点:是一种非正式传输协议,该协议的一个要点就是允许用户传递一个callback 或者开始就定义一个回调方法,参数给服务端,然后服务端返回数据时会将这个callback 参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了. 缺点:它只支持GET请求而不支

前端Jquery-Ajax跨域请求,并携带cookie

目录 1. 需现在服务端允许跨域,允许携带cookie 2. 前端Ajax跨域请求代码 1. 需现在服务端允许跨域,允许携带cookie 因服务端脚本语言不同,自行搜索设置 2. 前端Ajax跨域请求代码 $.ajax({ type: "POST", url: "http://127.0.0.1:8000/api/login", data: JSON.stringify({'num': 1}), dataType: 'json', xhrFields: { with

AJAX请求和跨域请求详解(原生JS、Jquery)

一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面. 本博客实验环境: python:2.7.11 web框架:tonado jquery:2.1.1 二.“伪”AJAX 由于

XMLHttpRequest的跨域请求

缘起 由于浏览器的同源策略,非同源不可请求. 但是,在实践当中,经常会出现需要跨域请求资源的情况,比较典型的例如某个子域名向负责进行用户验证的子域名请求用户信息等应用. 以前要实现跨域访问,可以通过JSONP.Flash或者服务器中转的方式来实现,但是现在我们有了CORS. CORS与JSONP相比,无疑更为先进.方便和可靠. 1 2 3 1. JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求. 2. 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得

ajax 跨域无法携带cookie 解决办法

ajax 跨域无法携带cookie,需要用到session,终于完美结局 xhrFields: { withCredentials: true }, 添加这个可能是大家都会做的一件事 但是添加上了之后就出现了另外一个问题 The 'Access-Control-Allow-Origin' header contains the invalid value 'Origin'. Origin ...... 2.服务器server端要配置Access-Control-Allow-Credentials

八种方式实现跨域请求

浏览器的同源策略 ? 提到跨域不能不先说一下"同源策略". ? 何为同源?只有当协议.端口.和域名都相同的页面,则两个页面具有相同的源.只要网站的 协议名protocol. 主机host. 端口号port 这三个中的任意一个不同,网站间的数据请求与传输便构成了跨域调用,会受到同源策略的限制. ? 同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互.这是一个用于隔离潜在恶意文件的关键的安全机制.浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本(如 JavaScr