Sprint Boot解决跨越问题及谷歌浏览器关闭同源策略

Sprint Boot解决跨越问题及谷歌浏览器关闭同源策略

在前后端分离的情况下，经常会遇到跨域问题，跨域他是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全措施。

如果你的后端是基于Java的Sprint Boot项目你可以使用下面的方法。需要注意的是Sprint Boot的版本不同，配置也会略有差异。

在Sprint Boot中配置跨域过滤器

Sprint boot2.6.7处理跨域配置如下。

package com.yong.demo.signproduct.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

import java.util.Collections;

/**
 * @from tangyongyong.cn
 * @version 1.0
 * @desc 全局跨域过滤器
 * @since 2022/5/5 7:59
 */
@Configuration
public class MyCorsConfiguration {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //1,允许任何来源
        corsConfiguration.setAllowedOriginPatterns(Collections.singletonList("*"));
        //2,允许任何请求头
        corsConfiguration.addAllowedHeader(CorsConfiguration.ALL);
        //3,允许任何方法
        corsConfiguration.addAllowedMethod(CorsConfiguration.ALL);
        //4,是否允许携带cooke进行跨越
        corsConfiguration.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(source);
    }
}

在Sprint boot2.4.0以下使用如下配置来解决跨域问题。

package com.yong.demo.signproduct.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsWebFilter;

import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;
/**
 * 配置跨越
 *
 * */
@Configuration
public class MyCorsConfiguration {
    //加入容器注解
    @Bean
    public CorsWebFilter corsWebFilter(){
        UrlBasedCorsConfigurationSource source=new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //1.允许所有请求进行跨越
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addAllowedOrigin("*");
        //是否允许携带cooke进行跨越
        corsConfiguration.setAllowCredentials(true);

        source.registerCorsConfiguration("/**",corsConfiguration);
        return new CorsWebFilter(source);
    }
}

使用Chrome浏览器解决跨域问题。

在前端也可以使用谷歌浏览器临时关闭同源策略，我这里介绍如果关闭Mac谷歌浏览器的同源策略，来实现跨域请求。

1.创建文件夹 MyChromeDevUserData（文件夹名称可随意配置）
2.把下面代码在终端中运行 （tangyong 是我自己用户名，切记自己要改；–user-data-dir=‘第1步创建文件的本地路径’ ）

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security  --user-data-dir=/Users/tangyong/Documents/MyChromeDevUserData

3.输入之后，会弹出一个关闭了同源策略的Chrome窗口，他会提示一些安全性下降问题，不用管他，将你需要使用调试的页面在浏览器中打开，会发现不会提示跨域请求了。