vue + springboot前后端分离跨域cookie

问题

前后端分离,请求后端的时候直接请求后端url发现每次请求的sesssionid都不一样,导致缓存数据获取失败

使用 webpack-dev-server进行开发时,webpack启动了一个运行在 node 上的 web 服务器,此时开发环境访问对应的端口时 (以 8080 举例) ,浏览器返回的 vue 页面是 webpack处理后的结果。

跨域。简单来说,在使用 ajax 请求与当前页面不同来源的数据时,浏览器会拦截服务器发回的响应。在开发环境下,“当前来源”就是 http://127.0.0.1:8080,向任何其它地址或端口的请求都会被视作跨域,从而被浏览器拦截。

webpack-dev-server 的 proxy 是为了简化开发环境下的跨域请求配置。在上述情景中,注意被拦截的是发往“其它来源”的请求,而发往“当前来源”的不会被拦截,此处的“当前来源”则是作为开发服务器的 webpack。webpack的思路就是基于此的,当发现符合在 devServer proxy 中配置好的请求格式时,将该请求拦截下来,由自己去请求服务器获取响应,然后把该响应返回给前端页面,即相当于一个传话筒。

编译打包后,前端页面成为了单独的静态资源,webpack-dev-server被抽离出去了。但是资源要被访问,那必然还是需要有另一个 web 服务器来装载它,这个服务器常见的就是 nginx。所以,如果想要让线上的 vue 页面也能正常访问服务器,那么只需要配置 nginx,告诉它同样的事,即“当我访问某个 url 时,由你来做实际的请求,然后把结果告诉我”。

解决方法

一、axios设置baseurl(后端服务地址)以及跨域带cookie

1、前端部分

axios设置config的baseurl为后端服务器的访问地址

同时在vue引入axios的位置添加以下代码,否则会出现每次访问后端cookie中的sessionid不一样

import axios from 'axios'
axios.defaults.withCredentials = true;// 允许跨域携带cookie

 2、后端过滤器配置允许跨域

response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));//支持跨域请求
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");//是否支持cookie跨域

注意设置了axios.defaults.withCredentials = true;之后依然没有带上cookie信息,在chrome 80版本之后,谷歌把cookie的SameSite属性,从None改成了Lax。这时候,会导致cookie因为跨站而导致不会自动带上!所以需要后台在请求返回的时候 添加设置SiteSame 属性为 None

SiteSame 介绍

最新的chrome,设置null会默认成lax吧。但是如果设置samesite为NONE,又需要设置secure。https支持secure,http不行。samesite设置为null,确实去到浏览器默认就是Lax,就像domain一样,默认不设置,默认就是当前接口的domain。 这个问题最好的解决方法还是前端那边用vue配置webpack,或者nginx之类的,从协议,域名,端口上保持一致,就不存在任何跨域问题了

修改SiteSame值

Cookie c = new Cookie("SameSite", "None");

response.addCookie(c);

或者

response.setHeader(HttpHeaders.SET_COOKIE, "SameSite=None; Secure");

spring boot 配置

        <dependency>
            <groupId>org.springframework.session</groupId>
            <artifactId>spring-session-core</artifactId>
            <version>2.5.2</version>
        </dependency>
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.session.web.http.CookieSerializer;
import org.springframework.session.web.http.DefaultCookieSerializer;

@Configuration
public class SpringSessionConfig {

    @Bean
    public CookieSerializer httpSessionIdResolver() {
        DefaultCookieSerializer cookieSerializer = new DefaultCookieSerializer();
        // 取消仅限同一站点设置
        cookieSerializer.setSameSite(null);
        return cookieSerializer;
    }
}

如果是使用了shiro-spring, CookieSerializer 就不起作用了,修改使用shiro的设置

       <dependency>
            <groupId>org.apache.shiro</groupId>
            <artifactId>shiro-spring</artifactId>
            <version>1.5.2</version>
        </dependency>
    @Bean
    public SimpleCookie sessionIdCookie() {
        SimpleCookie simpleCookie = new SimpleCookie();
        simpleCookie.setName("shiroSessionId");
        simpleCookie.setHttpOnly(true);
        simpleCookie.setSameSite(Cookie.SameSiteOptions.NONE);
        return simpleCookie;
    }

二、可以通过Nginx的代理来实现

1、设置代理

server {
    listen 8082; //访问端口
    server_name localhost;
    location / {
        root D:/dist; //前端打包项目
        index index.html index.htm;
    }
    location /api { //代理拦截
        proxy_pass http://localhost:8080/api
    }
}

2、后端过滤器配置允许跨域

  • 0
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: vue springboot前后端分离开发实战pdf是一本介绍如何使用Vue和Spring Boot进行前后端分离开发的实战指南。本书详细讲解了如何使用Vue框架搭建前端应用,以及如何利用Spring Boot框架构建后端应用,旨在帮助读者掌握前后端分离开发的技术和方法。 在这本书中,作者首先介绍了前后端分离开发的概念和背景,解释了为什么前后端分离可以带来更好的开发体验和效率。接着,作者详细介绍了Vue框架的基本概念和使用方法,包括组件化开发、路由管理、状态管理等方面的内容。读者可以通过跟随书中的示例代码,逐步学习并实践Vue框架的应用。 在后半部分,作者重点介绍了Spring Boot框架的使用。读者将学习如何使用Spring Boot快速搭建后端应用,并了解如何通过RESTful API与前端应用进行数据交互。此外,作者还介绍了Spring Security、Spring Data JPA等常用的配套技术,帮助读者构建安全可靠的后端应用。 本书不仅提供了理论知识,还提供了大量的实战案例和实例代码。读者可以跟随书中的示例项目逐步实践,从而更好地掌握Vue和Spring Boot的开发技巧。此外,本书还涉及了一些项目管理和部署的内容,帮助读者了解如何将前后端分离的应用部署到生产环境中。 总而言之,vue springboot前后端分离开发实战pdf是一本适合想要学习并实践前后端分离开发的开发人员的实用指南,通过学习本书,读者将获得丰富的知识和经验,能够独立设计和开发前后端分离的应用程序。 ### 回答2: 《Vue SpringBoot前后端分离开发实战PDF》这本书是一本关于前后端分离开发实践的指南。它结合了VueSpringBoot两个流行的开发框架,帮助开发者更好地理解和应用这两个技术。 在书中,作者首先介绍了前后端分离的概念和优势。前后端分离开发可以提高开发效率和协作性,同时也能提供更好的性能和扩展性。然后,作者详细介绍了Vue框架的基本知识和使用方法,包括Vue的搭建、组件的创建和组织等。读者可以通过实际的案例来学习和练习。 接着,作者转向SpringBoot框架的介绍和使用。SpringBoot是一个轻量级的Java开发框架,可以快速构建和部署应用程序。作者讲解了如何使用SpringBoot创建RESTful API,以及如何与Vue前端进行交互。 在书的后半部分,作者提供了一些实战案例和示例代码。这些案例涵盖了常见的前后端分离开发场景,如用户管理、权限控制、数据交互等。通过这些案例,读者可以了解到如何将VueSpringBoot无缝地结合起来,构建强大的应用程序。 总的来说,《Vue SpringBoot前后端分离开发实战PDF》是一本非常实用的书籍。它不仅系统地介绍了VueSpringBoot的基础知识和使用方法,还提供了丰富的实战经验和案例。对于想要掌握前后端分离开发技术的开发者来说,这本书是一个很好的学习资源。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值