后端解决跨域

最新推荐文章于 2024-02-27 06:01:05 发布
最新推荐文章于 2024-02-27 06:01:05 发布
阅读量1.5k 收藏 3
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58363479/article/details/131383991
版权

对于跨域，相信同学们都有所了解。前端的跨域的若干种方式，大家也都知道，什么 JSONP，iframe+domain 等等。但是我们今天的主题，不是前端跨域，而是后端跨域。

一旦提及到跨域，就会想到同源策略，那我们就先来回顾跨域和同源策略。

什么是跨域请求
首先，我们要了解什么是跨域请求。简单来说，当一台服务器资源从另一台服务器（不同 的域名或者端口）请求一个资源或者接口，就会发起一个跨域 HTTP 请求。举个简单的例子，从http://aaa.com/index.html,发送一个 Ajax 请求，请求地址是 http://bbb.com/下面的一个接口，这就是发起了一个跨域请求。在不做任何处理的情况下，这个跨域请求是无法被成功请求的，因为浏览器基于同源策略 会对跨域请求做一定的限制。那什么又是同源策略呢？

什么是同源策略
首先大家要知道同源策略发生的场景——浏览器中，什么意思呢？如果不是浏览器的话， 就不会受到同源策略的影响。也就是说，两个服务器直接进行跨域请求是可以进行数据请求的。这也就为我们接下来的后端跨域埋下一下小伏笔。 同源策略的目的是什么呢？同源策略限制了从同一个源加载的文档或者脚本如何与来自另 一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

同源策略限制内容有：
Cookie、LocalStorage、IndexedDB 等存储性内容
DOM 节点
AJAX 请求不能发送
那什么又是同源？

大家都知道,一个域名请求地址的组成是:协议+域名+端口号+请求资源地址 , 当协议、域名、端口号中任意一个不相同时 , 都算作不同源（必须是域名完全相同，比如说 a.example.com 和 b.example.com 这两个域名。虽然它们的顶级域名和二级域名（均为 example.com）都相同，但是三级域名（a 和 b）不相同，所以也不能算作域名相同）。如果不同时满足这上面三个条件，那就不符合浏览器的同源策略。 需要注意的是，不是所有的交互都会被同源策略拦截下来，下面两种交互就不会触发同源策略： 

跨域写操作（Cross-origin writes）
例如超链接、重定向以及表单的提交操 作，特定少数的 HTTP 请求需要添加预检请求（preflight）

跨域资源嵌入（Cross-origin embedding）
<script> 标签嵌入的跨域脚本； o <link> 标签嵌入的 CSS 文件； o <img> 标签嵌入图片；

<video> 和 <audio> 标签嵌入多媒体资源； o <object>, <embed>, <applet> 的插件；

@font-face 引入的字体，一些浏览器允许跨域字体（cross-origin fonts），一些需要同源字体（same-origin fonts）；

<frame> 和 <iframe> 载入的任何资源，站点可以使用 X-FrameOptions 消息头来组织这种形式的跨域交互。

这里你或许有个疑问：请求跨域了，那么请求到底发出去没有？

跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。你可能会疑问明明通过表单的方式可以发起跨域请求，为什么 Ajax 就不会?因为归根结底，跨域是为了阻止用户读取到另一个域名下的内容，Ajax 可以获取响应，浏览器认为这不安全，所以拦截了响应。但是表单并不会获取新的内容，所以可以发起跨域请求。同时也说明了跨域并不能完全阻止 CSRF，因为请求毕竟是发出去了。

跨域解决方案
跨域就是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果。方法有很多 ，大致分为两类：

服务端进行设置默认允许某些域名跨域访问
从客户端入手想办法绕开同源安全策略
常见的解决方案有：
1.jsonp
利用 <script> 标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。
JSONP和AJAX相同，都是客户端向服务器端发送请求，从服务器端获取数据的方式。但AJAX属于同源策略，JSONP属于非同源策略（跨域请求）
JSONP优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性,不安全可能会遭受XSS攻击。
2.cors
CORS（Cross-origin resource sharing），跨域资源共享。CORS 其实是浏览器制定的一个规范，浏览器会自动进行 CORS 通信，它的实现则主要在服务端，它通过一些 HTTP Header 来限制可以访问的域，例如页面 A 需要访问 B 服务器上的数据，如果 B 服务器 上声明了允许 A 的域名访问，那么从 A 到 B 的跨域请求就可以完成。对于那些会对服务器数据产生副作用的 HTTP 请求，浏览器会使用 OPTIONS 方法发起 一个预检请求（preflight request），从而可以获知服务器端是否允许该跨域请求，服 务器端确认允许后，才会发起实际的请求。在预检请求的返回中，服务器端也可以告知客 户端是否需要身份认证信息。我们只需要设置响应头，即可进行跨域请求。

虽然设置 CORS 和前端没什么关系，但是通过这种方式解决跨域问题的话，会在发送请求时出现两种情况，分别为简单请求和复杂请求。

简单请求：
只要同时满足以下两大条件，就属于简单请求：
1）使用GET、HEAD、POST方法之一；
2）Content-Type 的值仅限于：text/plain、multipart/form-data、application/x-www-form-urlencoded，请求中的任意 XMLHttpRequestUpload 对象均没有注册任何事件监听器； XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问；

复杂请求：
不符合以上条件的请求就肯定是复杂请求了。 复杂请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求,该请求是 option 方法的，通过该请求来知道服务端是否允许跨域请求。
我们用PUT向后台请求时，属于复杂请求，后台需被请求的Servlet中添加Header设置，Access-Control-Allow-Origin这个Header在W3C标准里用来检查该跨域请求是否可以被通过，如果值为*则表明当前页面可以跨域访问。默认的情况下是不允许的。

一般我们可以写一个过滤器：

@WebFilter(filterName = "corsFilter", urlPatterns = "/*",
        initParams = {@WebInitParam(name = "allowOrigin", value = "*"),
                @WebInitParam(name = "allowMethods", value = "GET,POST,PUT,DELETE,OPTIONS"),
                @WebInitParam(name = "allowCredentials", value = "true"),
                @WebInitParam(name = "allowHeaders", value = "Content-Type,X-Token")})
public class CorsFilter implements Filter {
 
    private String allowOrigin;
    private String allowMethods;
    private String allowCredentials;
    private String allowHeaders;
    private String exposeHeaders;
 
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        allowOrigin = filterConfig.getInitParameter("allowOrigin");
        allowMethods = filterConfig.getInitParameter("allowMethods");
        allowCredentials = filterConfig.getInitParameter("allowCredentials");
        allowHeaders = filterConfig.getInitParameter("allowHeaders");
        exposeHeaders = filterConfig.getInitParameter("exposeHeaders");
    }
 
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        if (!StringUtils.isEmpty(allowOrigin)) {
            if(allowOrigin.equals("*")){
                // 设置哪个源可以访问
                response.setHeader("Access-Control-Allow-Origin", allowOrigin);
            }else{
                List<String> allowOriginList = Arrays.asList(allowOrigin.split(","));
                if (allowOriginList != null && allowOriginList.size() > 0) {
                    String currentOrigin = request.getHeader("Origin");
                    if (allowOriginList.contains(currentOrigin)) {
                        response.setHeader("Access-Control-Allow-Origin", currentOrigin);
                    }
                }
            }
        }
        if (!StringUtils.isEmpty(allowMethods)) {
            //设置哪个方法可以访问
            response.setHeader("Access-Control-Allow-Methods", allowMethods);
        }
        if (!StringUtils.isEmpty(allowCredentials)) {
            // 允许携带cookie
            response.setHeader("Access-Control-Allow-Credentials", allowCredentials);
        }
        if (!StringUtils.isEmpty(allowHeaders)) {
            // 允许携带哪个头
            response.setHeader("Access-Control-Allow-Headers", allowHeaders);
        }
        if (!StringUtils.isEmpty(exposeHeaders)) {
            // 允许携带哪个头
            response.setHeader("Access-Control-Expose-Headers", exposeHeaders);
        }
        filterChain.doFilter(servletRequest, servletResponse);
    }
 
    @Override
    public void destroy() {
 
    }
}

大功告成，现在前端就可以跨域获取后台的数据了，正如我们上面所说的，后端是实现 CORS 通信的关键。

如果你的SpringBoot版本在2.0以上，以下代码配置即可完美解决你的前后端跨域请求问题：

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
        /*是否允许请求带有验证信息*/
        corsConfiguration.setAllowCredentials(true);
        /*允许访问的客户端域名*/
        corsConfiguration.addAllowedOrigin("*");
        /*允许服务端访问的客户端请求头*/
        corsConfiguration.addAllowedHeader("*");
        /*允许访问的方法名,GET POST等*/
        corsConfiguration.addAllowedMethod("*");
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }
}

或者使用WebMvcConfigurationSupport，实现方式有很多，感兴趣的可以自行研究。

3. @CrossOrigin注解
这个方法仅对Java有用。springboot中，在Controller类上添加一个 @CrossOrigin(origins ="*") 注解就可以实现对当前controller 的跨域访问了，当然这个标签也可以加到方法上，或者直接加到入口类上对所有接口进行跨域处理，注意这个注解只在JDK1.8版本以上才起作用。
————————————————
版权声明：本文为CSDN博主「CrazySnail_x」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_40910372/article/details/100068498

qq_58363479
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
springboot后端解决跨域问题
08-26
今天小编就为大家分享一篇关于springboot后端解决跨域问题，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
前后端解决跨域五种方案
热门推荐
m0_58528901的博客
03-27 1万+
前后端解决跨域五种方案
分享后端解决跨域问题的三种方案
Lee_92的博客
02-26 1万+
跨源资源共享（，跨源资源共享，或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它源（域、协议或端口），使得浏览器允许这些源访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。
后端实现跨域（三种方式）
最新发布
m0_70770402的博客
02-27 1082
相较于前端实现跨域，有时会出现跨域失败，列举后端三种方式实现跨域。2.实现接口并重写方法来解决跨域。3.添加过滤器来实现跨域。1.加注解 代码重复。
后端跨域解决
m0_58542705的博客
03-23 9879
后端处理跨域问题 什么是跨域 跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。 所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子： http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域） http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域） http://ab
关于跨域后端解决跨域问题
ls18802694089的博客
06-10 5831
关于跨域的理解，后端如何解决遇到的跨域问题
后端实现跨域的几种方案
RAXCL的博客
10-24 1968
cros是前后端交互后的产物，解决方案：nginx前端或者后端或者浏览器端解决后端控制台也是可以显示日志的，但需要将 logging.logging.root 的日志级别改为debug。
跨域问题
qq_36332184的博客
12-08 486
1.什么时候会产生跨域问题？ 看一下我们的url组成： https://mp.csdn.net/editor/html?spm=1001.2101.3001.4504 协议://域名:端口号 ?参数主要又四者组成 其中 协议的切换，域名的切换，端口号的切换都会造成跨域问题类似如下： 解决方案 前端解决方案 使用JSONP方式实现跨域调用； 使用NodeJS服务器做为服务代理，前端发起请求到NodeJS服务器， NodeJS服务器代理转发请求到后端服务器； 后端解决方案 nginx.
前后端跨域的解决方案
IT小辉同学
07-08 1151
祝福你，在人生的旅途中，能够拥有坚定的信念和勇往直前的勇气。愿你心怀善良和喜悦，收获幸福和成功。无论遇到什么困难，希望你始终保持乐观与坚强，勇敢地面对挑战。愿你的每一天都充满阳光和温暖，成就美好的人生。祝福你，幸福如影随形！
前端后端跨域问题
01-02
跨域 原因：  浏览器限制  跨域（域名，端口，协议，ip不一样）  在使用XMLHTTPRequest对象发送HTTP请求时，会遇到同源策略问题，域不同请求会被浏览器拦截。
java解决请求跨域的两种方法
08-25
主要为大家详细介绍了java解决请求跨域的两种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Python项目跨域问题解决方案
12-17
# 设置哪些客户端可以通过地址访问到后端 ALLOWED_HOSTS = [ 'api.luffycity.cn', ] 2.安装跨域模块（一下代码修改都是在settings.dev下进行的） pip install django-cors-headers -i ...
ssm跨域问题解决方案
11-18
ssm跨域问题解决方案
简单java跨域配置文件
phillip629的博客
09-12 512
import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.sprin...
后端解决跨域的三种方式
摩羯座de杰杰陆的博客
04-01 2528
后端解决跨域的三种方式一、在WebMvcConfig中重写addCorsMappings方法二、在SecurityConfig中创建corsConfigurationSource三、创建跨域配置类实现 一、在WebMvcConfig中重写addCorsMappings方法 二、在SecurityConfig中创建corsConfigurationSource 三、创建跨域配置类实现 package com.moss.config; import org.springframework.context.
解决跨域的三种方法
weixin_58448088的博客
02-21 1万+
1、详解解决跨域三种方法 2、瀑布流布局 3 、函数的节流 4、函数的防抖
前后端跨域问题解决方案
m0_52200287的博客
10-13 3532
1、@CrossOrigin注解 法；2、配置响应头 法；3、实现WebMvcConfigurer 法；4、spring注入CorsFilter 法；5、拦截器 法
后台解决跨域的几种方式
A20190518的博客
10-17 1756
前端解决跨域 jsonp nginx document.domin window.name 后端解决跨域： (1) 设置当前接口的响应头，设置所有网络都可访问 当前接口允许跨域： 在app.get('/user',(req,res)=>{ // 通过响应对象res设置 res.header('Access-Control-Allow-Origin',"*"); }) (2) cors...
Java跨域问题的几种后端解决方式
dedede001的博客
05-05 4075
跨域指的是：浏览器不能执行其他网站的脚本，从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。跨域是由浏览器的同源策略造成的，是浏览器施加的安全限制。a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的。
如果在后端解决跨域问题
07-28
如果你想在后端解决跨域问题，可以根据你使用的后端框架或语言采取相应的解决办法。以下是一些常见的后端解决跨域问题的方法： 1. 使用 CORS（跨域资源共享）：在服务器端配置允许跨域请求的响应头。具体的配置方法根据你使用的后端框架或语言而有所不同。一般来说，你需要在响应中添加 `Access-Control-Allow-Origin` 头，并设置为允许访问的域名，或者设置为 `*` 表示允许所有域名访问。你还可以设置其他 CORS 相关的头信息，如 `Access-Control-Allow-Methods`、`Access-Control-Allow-Headers` 等。 2. 反向代理：通过反向代理服务器来处理跨域请求。你可以配置反向代理服务器将请求转发给目标服务器，并在反向代理服务器中设置合适的 CORS 响应头。常见的反向代理服务器有 Nginx、Apache 等。 3. JSONP：如果你的接口只支持 GET 请求，你可以考虑使用 JSONP 来解决跨域问题。JSONP 是通过动态创建 `<script>` 标签来进行跨域请求的，但需要后端接口支持返回 JSONP 格式的数据。 根据你使用的后端技术，你可以选择适合你的解决方案。但请注意，在配置 CORS 或使用 JSONP 时，要确保你的服务器端已经进行了适当的安全措施，以防止潜在的安全风险。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值