前后端分离项目的跨域问题

首先介绍一下所遇到的跨域请求出现带来的问题: 在响应头中虽然有"Set-cookies"属性, 但是无法在(跳转后的页面)请求头中获取这个"Cookies"属性. 所以经过了一次的页面的跳转, 我们遗失了网页中的"Cookies"属性中的值.
以我这里书写的 “springboot+vue” 的前后端分离项目为例 (security登录): 我在登录的同时会建立一个名为 “SPRING_SECURITY_CONTEXT” 的 sission. 我们可以在登录的 login 请求中的响应头中找到一个 “Set-cookies” 属性. 按理来说, 我们因该可以在跳转后的页面访问名为 “SPRING_SECURITY_CONTEXT” 的 “Cookies”, 但是系统告诉我们他找不到这个属性.

总结来说跨域问题所带来的麻烦就是: 无法获取已经建立的Cookies. (或者说建立的Cookies被遗失???
为了解决如上所述的问题. 我们需要在前后端分离项目的前端和后端都进行跨域处理.

后端部分:

在所有的用户界面层 (Controller), 加上如下注释:

@CrossOrigin

在我们的配置类中书写一个 CorsFilter

	/**
     * 解决前后端分离的跨域问题, 贴进去就好了
     * @return
     */
    @Bean
    public CorsFilter corsFilter() {
    
    
        // SameSite None
        //创建CorsConfiguration对象后添加配置
        CorsConfiguration config = new CorsConfiguration();
        //设置放行哪些原始域，这里直接设置为所有
        config.addAllowedOriginPattern("*");
        //放行哪些原始请求头部信息
        config.addAllowedHeader("*");
        //放行哪些请求方式，*代表所有
        config.addAllowedMethod("*");
        //是否允许发送Cookie，必须要开启，因为我们的JSESSIONID需要在Cookie中携带
        config.setAllowCredentials(true);
//        config.addExposedHeader("SameSite = None;Secure;");
        //映射路径
        UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
        corsConfigurationSource.registerCorsConfiguration("/**", config);

        System.out.println(" corsFilter -- yes");
        //返回CorsFilter
        return new CorsFilter(corsConfigurationSource);
    }

前端部分:
这个 vue 有很多的书写风格,我所了解的也不多, 和我一起做项目的那个同学vue写的就让我很迷茫… …
但是万变不离其中的是, 我们需要在 index.js 中添加跨域访问的相关配置. 可以试试下面两种方法.
第一种: 我是用这种方法解决的

const service = axios.create({
    
    
	baseURL: "http://127.0.0.1:8082",
	timeout: 3000,
	withCredentials: true // 主要是这个设置
});

第二种:

axios.defaults.withCredentials = true // 貌似没用, 都可以试试

后记: 6个人一个小组的项目答辩, 实际上只有2个人在写. 最后出现问题只有我一个人去尝试解决. 不得不说, 小组成员的选择真的很重要.

-- over.

前后端分离项目的跨域问题

猜你喜欢