拦截器处理跨域问题(CORS)

本文涉及的产品
.cn 域名,1个 12个月
简介: 拦截器处理跨域问题(CORS)

前言

大家好,一直以来我都本着 用最通俗的话理解核心的知识点, 我认为所有的难点都离不开 基础知识 的铺垫


适合人群

  • 学完Java基础
  • 想通过Java快速构建web应用程序
  • 想学习或了解SpringBoot

大佬可以绕过 ~


背景

如果你是一路看过来的,很高兴你能够耐心看完。之前带大家学了Springboot基础部分,对基本的使用有了初步的认识, 接下来的几期内容将会带大家进阶使用,会先讲解基础中间件的使用和一些场景的应用,或许这些技术你听说过,没看过也没关系,我会带大家一步一步的入门,耐心看完你一定会有收获~


情景回顾

上期带大家学习了Springboot中如何集成MyBatis分页插件PageHelper以及它的一个基本使用, 本期将带大家学习SpringBoot中如何处理跨域问题的,同样的,我们集成到Springboot中。最近github可能会被墙,所以我把源码放到了国内gitee上,本节我们依然使用上期的代码


项目源码(持续更新⭐️)


什么是跨域❓

同样的,为了照顾小白同学,依然先说一下啥是跨域。说到跨域问题,如果你是前端同学,肯定不会陌生, 你有可能调接口调着调着,发现请求发布出去,控制台会报CORS错误, 这时候你会找后台老大哥给你处理一下。然而现在前端工程中,一般都会有proxy代理,这样也能解决问题,这只是本地调试,但上线还会有问题, 除非你发布的时候你们是同一个下。


好,说了这么多,大概明白跨域是如何产生了,就是说前端调用的后端接口不属于同一个域(域名或端口不同),就会产生跨域问题,也就是说你的应用访问了该应用域名或端口之外的域名或端口,这里给大家总结一下,产生跨域的三个条件:


  • 宿主环境 在浏览器端,这是浏览器的一种保护机制,这个并不是服务端的限制,可以试试postman和自己写一个html调试一下
  • 请求地址的域名或端口和当前(页面打开的地址)访问的域名或端口不一样
  • 发送的是XHR(XMLHttpRequest)请求


解决思路

解决思路大致可以分为以下几方面:


浏览器端

从源头浏览器解决,解除跨域机制,用户自己设置浏览器,这不大现实,好, pass


JSONP请求替代XHR

发送JSONP请求替代XHR请求,并不能适用所有的请求方式,不推荐


请求代理

之前我们提到前端本地工程开启Proxy,那么服务端可不可进行代理呢?答案是可以的,怎么做?可以通过nginx进行代理,给大家简单演示一下:

server {
    listen 80;
    server_name www.a.com;
    root html;
    index index.html index.htm;
    location /api {
        proxy_pass http://www.b.com; // 转发地址
    }
}
复制代码

nginx是当今比较火的web服务器,常用于服务代理, 等教大家部署的时候会讲一下


服务端处理

这也是本节要讲的内容,我们先不直接的给大家展示代码,先说一下它的原理。


一般我们下载的浏览器比如Chrome,它都是自行默认开启跨域限制的,那我们如何判断我们发出去的请求是一个跨域请求呢,打开浏览器开发者工具,在请求的请求头中就可以发现,如果不是一个跨域请求,它只有Host,如果是一个跨域请求它会多一个Origin,告诉浏览器我俩请求的地方不一样


那么服务端是如何处理的呢?

跨源资源共享(CORS) 是一种基于HTTP头的机制,该机制通过允许服务器标示除了它自己以外的其它origin(域,协议和端口),这样浏览器就可以访问加载这些资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求,该机制通过浏览器发起一个到服务器托管的跨源资源的预检(OPTION)请求。在预检中,浏览器发送的头中标示有HTTP方法和真实请求中会用到的头,那么具体是怎么设置的呢?


#  设置允许访问的域 * 代表所有
Access-Control-Allow-Origin' :  '*'
# 设置允许请求者发送的请求头 
'Access-Control-Allow-Headers': '*'
# 设置允许请求者发送的请求方法 多个用逗号隔开,上面也是如此
Access-Control-Allow-Methods','PUT,POST,GET,DELETE,OPTIONS
复制代码


服务端通过设置如上,就可以进行跨域访问了。好,有了基本的理论之后,我们一起看一下在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);
    }
}
复制代码


是不是很简单~  它的实现机制主要是通过请求拦截器实现的,你慢慢会发现,随着学习的深入,你会遇到各种拦截器技术


结束语

本期到这里就结束了,总结一下,本节主要带大家认识了什么是跨域,以及解决思路,最后教大家Sprinboot中是如何配置跨域访问的,源码已更新,大家可以自行试一下


下期预告

俗话说没有仪表盘的车不敢开,同样的,服务器没有日志记录,被攻击了都不知道。log对于问题的溯源是非常重要的, 下期将带大家学习一下如何在Springboot中配置日志以及如何开启sql日志,我们将学习到logback的配置。我们下期不见不散, 关注我,不迷路 ~

相关文章
|
1月前
|
JSON 安全 前端开发
浅析CORS跨域漏洞与JSONP劫持
浅析CORS跨域漏洞与JSONP劫持
63 3
|
10天前
|
缓存 前端开发 应用服务中间件
CORS跨域+Nginx配置、Apache配置
CORS跨域+Nginx配置、Apache配置
49 7
|
4月前
|
前端开发 安全 JavaScript
Spring Boot2 系列教程(十四)CORS 解决跨域问题
Spring Boot2 系列教程(十四)CORS 解决跨域问题
|
1月前
|
安全
CORS 跨域资源共享的实现原理
CORS 跨域资源共享的实现原理
|
2月前
|
Web App开发 JSON 数据格式
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)
|
2月前
|
API
【Azure Function】Function本地调试时遇见跨域问题(blocked by CORS policy)
【Azure Function】Function本地调试时遇见跨域问题(blocked by CORS policy)
【Azure Function】Function本地调试时遇见跨域问题(blocked by CORS policy)
|
2月前
|
安全 前端开发 Java
Web端系统开发解决跨域问题——以Java SpringBoot框架配置Cors为例
在Web安全上下文中,源(Origin)是指一个URL的协议、域名和端口号的组合。这三个部分共同定义了资源的来源,浏览器会根据这些信息来判断两个资源是否属于同一源。例如,https://www.example.com:443和http://www.example.com虽然域名相同,但由于协议和端口号不同,它们被视为不同的源。同源(Same-Origin)是指两个URL的协议、域名和端口号完全相同。只有当这些条件都满足时,浏览器才认为这两个资源来自同一源,从而允许它们之间的交互操作。
Web端系统开发解决跨域问题——以Java SpringBoot框架配置Cors为例
|
2月前
|
安全 开发者 UED
|
2月前
|
前端开发 JavaScript
【Azure 环境】前端Web通过Azure AD获取Token时发生跨域问题(CORS Error)
【Azure 环境】前端Web通过Azure AD获取Token时发生跨域问题(CORS Error)
|
3月前
|
安全
CORS 跨域资源共享的实现原理
CORS 跨域资源共享的实现原理