跨域问题(CORS)详细说明和解决

最新推荐文章于 2024-07-11 15:38:00 发布

程序员bling

最新推荐文章于 2024-07-11 15:38:00 发布

阅读量3.6k

点赞数 2

分类专栏：计算机网络文章标签：服务器运维

本文链接：https://blog.csdn.net/wangliangluang/article/details/125709195

版权

计算机网络专栏收录该内容

9 篇文章 2 订阅

订阅专栏

本文详细解析了跨域问题的原理，包括什么是简单请求和非简单请求，展示了跨域问题的常见表现，并提供了两种解决方案：使用nginx代理和后端配置CORS。特别介绍了如何在Spring Boot中通过CorsConfiguration实现跨域请求的配置。

摘要由CSDN通过智能技术生成

文章目录

一.什么是跨域问题

      就是浏览器对JS施加的一种安全限制.浏览器默认不允许JS脚本获取远程网站的数据.
      当JS发送AJAX请求时,就要遵守同源策略,否则会被限制.
      此外,通过img、iframe、script等标签的src属性，则不限制。主要限制不同源网站相互之间的ajax调用。
在这里插入图片描述

二.跨域请求的流程

针对一些非简单的跨域请求,浏览器会先发送一个预检请求(请求方法为OPTIONS),也就是询问服务器是否允许这样的跨域请求,如果浏览器允许,
才会发送真正的数据请求.
在这里插入图片描述

什么是非简单的请求?

某些请求不会触发 CORS 预检请求。本文称这样的请求为“简单请求”，若请求 满足所有下述条件，则该请求可视为“简单请求”：

在这里插入图片描述

三.跨域问题的体现

如果你的请求出现如下报错,那就是出现了跨域问题
在这里插入图片描述

四.跨域问题解决

1.使用nginx统一代理

我们可以将前端项目也部署到nginx服务器中,然后所有的请求均由nginx进行统一转发,从而解决跨域问题.
在这里插入图片描述

2.配置当前请求允许跨域.

既然跨域会发送预检请求,那么我们只要在后端配置允许当前请求可以跨域不就可以了吗.
我们可以在后端设置添加请求头进行返回,也就是配置一个filter,就可以实现跨域请求配置.
在这里插入图片描述
举例:

@Configuration
public class CronConfig {

    @Bean
    public CorsWebFilter corsWebFilter(){

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //允许带哪些请求头的请求跨域
        corsConfiguration.addAllowedHeader("*");
        //允许哪些请求方法跨域
        corsConfiguration.addAllowedMethod("*");
        //允许哪些请求来源跨域
        corsConfiguration.addAllowedOrigin("*");
        //是否允许携带cookie跨域
        corsConfiguration.setAllowCredentials(true);

        //针对任意路径均进行跨域配置
        source.registerCorsConfiguration("/**",corsConfiguration);

        return new CorsWebFilter(source);
    }
}