跨域问题说明

文章详细解释了浏览器的同源策略导致的跨域问题,以及CORS(跨域资源共享)机制的工作原理。当浏览器发起跨域请求时,如果没有正确的Access-Control-Allow-Origin头信息,请求会被浏览器阻止。解决跨域的方法包括JSONP、在服务端添加响应头(如在SpringBoot中使用@CrossOrigin注解或CorsFilter)以及通过nginx代理。文章提供了一个SpringBoot配置示例,用于添加允许跨域的过滤器。

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

跨域报错

在浏览器通过http://localhost:8601/地址访问前端工程。
chrome浏览器报错如下:

Access to XMLHttpRequest at 'http://localhost:63110/system/dictionary/all' from origin 'http://localhost:8601' has been 
blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

firefox浏览器报错如下:

已拦截跨源请求:同源策略禁止读取位于 http://localhost:63110/system/dictionary/all 的远程资源。
(原因:CORS 头缺少 'Access-Control-Allow-Origin')。状态码:200。

提示:从http://localhost:8601访问http://localhost:63110/system/dictionary/all被CORS policy阻止,因为没有Access-Control-Allow-Origin 头信息。CORS全称是 cross origin resource share 表示跨域资源共享。

出这个提示的原因是基于浏览器的同源策略,去判断是否跨域请求,同源策略是浏览器的一种安全机制,从一个地址请求另一个地址,如果协议、主机、端口三者全部一致则不属于跨域,否则有一个不一致就是跨域请求。

比如:
http://localhost:8601http://localhost:8602 由于端口不同,是跨域。
http://192.168.101.10:8601http://192.168.101.11:8601 由于主机不同,是跨域。
http://192.168.101.10:8601https://192.168.101.10:8601 由于协议不同,是跨域。
注意:服务器之间不存在跨域请求。

浏览器判断是跨域请求会在请求头上添加origin,表示这个请求来源哪里。
比如:

GET / HTTP/1.1
Origin: http://localhost:8601

服务器收到请求判断这个Origin是否允许跨域,如果允许则在响应头中说明允许该来源的跨域请求,如下:

Access-Control-Allow-Origin:http://localhost:8601

如果允许任何域名来源的跨域请求,则响应如下:

Access-Control-Allow-Origin:*

解决跨域的方法

1. JSONP

通过script标签的src属性进行跨域请求,如果服务端要响应内容则首先读取请求参数callback的值,callback是一个回调函数的名称,服务端读取callback的值后将响应内容通过调用callback函数的方式告诉请求方。如下图:
JSONP

2. 添加响应头

服务端在响应头添加 Access-Control-Allow-Origin:*
例如在SpringBoot中:

  • 在接口controller添加 @CrossOrigin 注解
  • 通过配置文件跨域
  • 通过 CorsFilter 跨域
3. 通过nginx代理跨域

由于服务端之间没有跨域,浏览器通过nginx去访问跨域地址。
nginx
1)浏览器先访问http://192.168.101.10:8601 nginx提供的地址,进入页面
2)此页面要跨域访问http://192.168.101.11:8601 ,不能直接跨域访问http://www.baidu.com:8601 ,而是访问nginx的一个同源地址,比如:http://192.168.101.11:8601/api ,通过http://192.168.101.11:8601/api 的代理去访问http://www.baidu.com:8601
这样就实现了跨域访问。
浏览器到http://192.168.101.11:8601/api 没有跨域
nginx到http://www.baidu.com:8601通过服务端通信,没有跨域。

实践

在SpringBoot中采用第二种方式实现:

@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);
    }
}

此配置类实现了跨域过滤器,在响应头添加 Access-Control-Allow-Origin。

其它方法:
SpringBoot 解决跨域问题的 5 种方案

验证

在这里插入图片描述

DVWA(Damn Vulnerable Web Application)是一个用于学习和练习网络安全的靶场平台,下面是DVWA的搭建过程: 1. 安装环境: - 首先,你需要将 DVWA 下载到你的 Web 服务器上。你可以在 GitHub 上找到 DVWA 的源码。 - 将下载好的源码放置在你的 Web 服务器根目录下。 2. 配置数据库: - 打开 DVWA 文件夹中的 `config` 子文件夹,将 `config.inc.php.dist` 文件重命名为 `config.inc.php`。 - 编辑 `config.inc.php` 文件,配置数据库连接信息。输入你的 MySQL 数据库主机名、用户名、密码和数据库名称,保存文件。 3. 初始化数据库: - 在浏览器中访问 DVWA 的 URL,如 `http://your-ip-address/dvwa`。 - 首次访问时,DVWA 会自动检测你的环境并引导你初始化数据库。点击 "Create / Reset Database" 按钮进行初始化。 4. 设置安全性级别: - 初始化数据库后,DVWA 会跳转到登录页面。使用默认的管理员用户名和密码(admin/password)登录。 - 在 "DVWA Security" 标签页中,选择安全性级别。初始情况下,选择 `low` 级别以方便学习和实践。 5. 开始使用 DVWA: - 确认安全性级别后,在 DVWA 主界面上你将看到各种漏洞和挑战,比如 SQL 注入、站点脚本(XSS)、文件包含等。 - 选择你感兴趣的漏洞或挑战,按照提示进行测试和实践。 请注意,在搭建 DVWA 靶场之前,确保你已经具备了运行 Web 服务器和 MySQL 数据库的环境,并且已经正确配置了相关的服务。此外,为了安全起见,建议在局网或虚拟机环境中使用 DVWA 进行学习和实践。 希望以上信息能对你有所帮助!如果有任何其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值