跨域问题以及解决方案

龙域、白泽

已于 2022-11-23 10:51:06 修改

阅读量1.1w

点赞数 7

分类专栏： SpringBoot 文章标签： http 服务器

于 2022-05-11 15:58:06 首次发布

本文链接：https://blog.csdn.net/m0_56750901/article/details/124712215

版权

SpringBoot 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

为什么会出现跨域问题?

出于浏览器的同源策略限制，它是由 Netscape 提出的一个安全策略，它是浏览器最核心也是最基本的安全功能，如果缺少同源策略，则浏览器的正常功能可能都会受到影响，现在所有支持JavaScript的浏览器都会使用这个策略。

跨域本质是浏览器对于ajax请求的一种安全限制：一个页面发起的ajax请求，只能是与当前页域名相同的路径，这能有效的阻止跨站攻击。因此：跨域问题是针对ajax的一种限制。但是这却给我们的开发带来了不便，而且在实际生产环境中，肯定会有很多台服务器之间交互，地址和端口都可能不同。

规定：浏览器要求，在解析Ajax请求时，要求浏览器的路径与Ajax的请求的路径必须满足三个要求，则满足同源策略，可以访问服务器。

要求：协议、域名、端口号都相同，只要有一个不相同，那么都是非同源。

什么是跨域？

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域(非同源)

之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。

浏览器出于安全的考虑，使用 XMLHttpRequest对象发起 HTTP请求时必须遵守同源策略，否则就是跨域的HTTP请求，默认情况下是被禁止的。换句话说，浏览器安全的基石是同源策略。

当前页面url	被请求页面url	是否跨域	原因
http://www.test.com/	http://www.test.com/index.html	不跨域	同源（协议、域名、端口号相同）
http://www.test.com/	https://www.test.com/index.html	跨域	协议不同（http/https）
http://www.test.com/	http://www.baidu.com/	跨域	主域名不同（test/baidu）
http://www.test.com/	http://blog.test.com/	跨域	子域名不同（www/blog）
http://www.test.com:8080/	http://www.test.com:7001/	跨域	端口号不同（8080/7001）

跨域只存在于浏览器端，不存在于安卓/ios等其它环境
跨域请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了

非同源限制

【1】无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

【2】无法接触非同源网页的 DOM

【3】无法向非同源地址发送 AJAX 请求

什么是Cors？

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing），允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。它通过服务器增加一个特殊的Header[Access-Control-Allow-Origin]来告诉客户端跨域的限制，如果浏览器支持CORS、并且判断Origin通过的话，就会允许XMLHttpRequest发起跨域请求。

CORS是跨域的一种解决方案，是目前主流的跨域解决方案。

普通跨域请求：只需服务器端设置Access-Control-Allow-Origin
带cookie跨域请求：前后端都需要进行设置

CORS中新增一组Http响应头数据，通过这些数据，服务器告诉浏览器哪些网站通过浏览器有权限访问哪些资源。同规定对于那些可能修改服务器数据的HTTP方法(如GET之外的HTTP请求)，浏览器必须首先使用OPTIONS方法发起一个预检请求，目的是查看服务器是否支持即将发起的跨域请求，如果服务器端允许，才发送实际的HTTP请求。在预检请求的返回中，服务器也可以通知客户端，是否需要携带身份凭证(如Cookie、HTTP认证等)。

CORS Header

Access-Control-Allow-Origin: http://www.xxx.com // 允许 http://www.xxx.com 的跨域请求
Access-Control-Max-Age：86400 // 预检请求的有效期，单位秒，设置在86400秒内发起的跨域请求不需要再发送预检请求
Access-Control-Allow-Methods：GET, POST, OPTIONS, PUT, DELETE // 设置允许跨域请求的方法
Access-Control-Allow-Headers: content-type // 允许跨域请求包含content-type
Access-Control-Allow-Credentials: true // 设置允许Cookie

SpringBoot解决跨域问题

方法一：注入重写方法的WebMvcConfigurer（推荐）

通过SpringMVC的配置的方式

在解决跨域问题上，我们只需要进行注入一个对象，我们对其进行重写其方法即可。

注：整个Application的Controller均允许跨域。

@Configuration
public class CORSConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer(){
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedHeaders("*")
                        .allowedMethods("*")
                        .allowedOrigins("*");
            }
        };
    }
}

注意：此方法与方法一（设置请求头）会冲突，导致跨域问题不能解决

方法二：@CrossOrigin注解（不推荐）

只需要在允许跨域的接口方法上进行添加注解即可，也可以直接在Controller类上添加，表示该Controller所有方法均允许跨域访问。

@RestController
// 允许 http://10.3.71.117:8080 跨域访问本服务器，不写默认是*，所有域都可以跨域访问
// 一般使用默认值即可 所有域的所有HTTP方法都可以跨域访问
@CrossOrigin(origins = {"http://10.3.71.117:8080"})
public class AccountController {

	@DeleteMapping("/{id}")
	public void remove(@PathVariable Long id) {
		// ...
	}
}

方法三：CorsFilter过滤器（推荐）

Cors Filter是Spring Web提供的一个处理跨域的过滤器，开发者可以通过该过滤器处理跨域

import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.Ordered;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
	private CorsConfiguration buildConfig() {  
        CorsConfiguration corsConfiguration = new CorsConfiguration();  
        corsConfiguration.addAllowedOrigin("*"); // 1允许任何域名使用
        corsConfiguration.addAllowedHeader("*"); // 2允许任何头
        corsConfiguration.addAllowedMethod("*"); // 3允许任何方法（post、get等）
        // corsConfiguration.setAllowCredentials(true); // 允许cookies跨域
        return corsConfiguration;  
    }  
  
    @Bean  
    public FilterRegistrationBean corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();  
        source.registerCorsConfiguration("/**", buildConfig());
        FilterRegistrationBean filterRegistrationBean = new FilterRegistrationBean(new CorsFilter(source));
        // 设置 Filter 的优先级为最高优先级，即所有过滤器中它最先执行(多个过滤器会有执行顺序的问题)
        filterRegistrationBean.setOrder(Ordered.HIGHEST_PRECEDENCE);
        return filterRegistrationBean;
    }  
}

方法四：Spring Security跨域解决

当我们为项目添加Spring Security，以上的解决跨域方式有的失效了(方法一和二)，有的可以继续使用(方法三看过滤器的优先级，如果优先级高于Spring Security的过滤器，有效，否则失效)

@Configuration
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
                .mvcMatchers("/hello1").permitAll()
                .anyRequest().authenticated()
                .and()
                .formLogin()
                // 跨域配置
                .and()
                .cors()
                .configurationSource(configurationSource());
    }

    CorsConfigurationSource configurationSource() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.setAllowedHeaders(Collections.singletonList("*"));
        corsConfiguration.setAllowedMethods(Collections.singletonList("*"));
        corsConfiguration.setAllowedOrigins(Collections.singletonList("*"));
        corsConfiguration.setMaxAge(3600L);

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

这种方式Spring Security会使跨域的过滤器优先于其它过滤器执行

方法五：网关配置跨域

使用在微服务项目中

@Configuration
public class CorsConfig {
    @Bean
    public CorsWebFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true); //是否允许携带cookie
        config.addAllowedOrigin("*"); //可接受的域，是一个具体域名或者*（代表任意域名）
        config.addAllowedHeader("*"); //允许携带的头
        config.addAllowedMethod("*"); //允许访问的方式
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser());
        source.registerCorsConfiguration("/**", config);
        return new CorsWebFilter(source);
    }
}