浏览器的同源策略及springboot中CORS跨域解决方案

最新推荐文章于 2025-05-24 09:38:46 发布

原创最新推荐文章于 2025-05-24 09:38:46 发布 · 357 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#springboot #cors跨域 #同源策略

spring boot 专栏收录该内容

5 篇文章

订阅专栏

本文深入解析了同源策略的基本概念，解释了为何它对于网页安全至关重要，并详细介绍了CORS（跨域资源共享）机制如何帮助解决跨域请求的问题。通过实际案例，展示了SpringBoot中如何配置全局跨域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个源的定义

源= 协议+域名+端口（如果有指定），比如https://192.166.10.77:8080,这里https是协议，192.166.10.77是域名，8080是端口

如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源。

举个例子：

下表给出了相对http://a.xyz.com/dir/page.html同源检测的示例:

URL	结果	原因
`http://a.xyz.com/dir2/other.html`	成功
`http://a.xyz.com/dir/inner/another.html`	成功
`https://a.xyz.com/secure.html`	失败	不同协议 ( https和http )
`http://a.xyz.com:81/dir/etc.html`	失败	不同端口 ( 81和80)
`http://a.opq.com/dir/other.html`	失败	不同域名 ( xyz和opq)

同源策略

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以xyz.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的。

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

假设我们在登陆支付宝网站的时候，会将登陆信息保存在cookie中，如果我们点击到一个木马网站，如果不存在同源策略的安全保护的话，这个网站能够直接获取我们的cookie，再去登陆支付宝网站，那么你的财产将处于危险的状态。

CORS解决跨域问题

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器发出XMLHttpRequest请求，从而解决AJAX只能同源使用的限制。

CORS简介

CORS需要浏览器和服务器同时支持。目前基本上主流的浏览器都支持CORS。所以只要后端服务支持CORS，就能够实现跨域。

springboot 解决方法

因为现在流行前后端分离的项目，前端和后端的源不相同，因此我们在使用springboot时，需要在后端进行全局跨域配置

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;

/**
 * 全局跨域配置
 */
@Configuration
public class GlobalCorsConfig {

    /**
     * 允许跨域调用的过滤器
     */
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        //允许所有域名进行跨域调用
        config.addAllowedOrigin("*");
        //允许跨越发送cookie
        config.setAllowCredentials(true);
        //放行全部原始头信息
        config.addAllowedHeader("*");
        //允许所有请求方法跨域调用
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
            return new CorsFilter(source);
        }
    }

好了，前端就能正常访问后端了。