学妹教我写代码【三】-如何正确的配置跨域

做过网站的朋友们都会遇到一个问题--跨域，什么是跨域？来看比较官方的说辞。

介绍

跨域（Cross-Origin）是指在 Web 开发中，一个网页的内容试图请求另一个域下的资源，而这个请求的域（协议、域名或端口）与当前页面的域不同。这涉及到同源策略（Same-Origin Policy），同源策略是浏览器实施的一种安全机制，它防止一个页面上的脚本访问另一个页面的内容，这可以有效地防止潜在的安全威胁。
同源是指两个 URL 的协议（http、https）、域名和端口都相同。如果不满足这个条件，就被认为涉及跨域。

简单点来说，就是浏览器不允许域名:端口不全部相同的两个网页通信。但是目前我们的开发模式大部分都是前后端分离的，那也就意味着前后端大部分情况下域名:端口一定是不同的，一定会跨域，所以我们就要做一些配置，来让浏览器允许我们跨域了。这个配置一般时候在后端配置的，这里我们以springboot为例。

配置

我们介绍cors配置，它是一种通过 HTTP 头部来让浏览器与服务器进行沟通，从而决定请求是否被允许。服务器通过设置特定的响应头，如 Access-Control-Allow-Origin，来指定哪些域是被允许访问资源的。

在代码中添加这个类就可以解决跨域问题啦！

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 CorsConfig {


    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration corsConfig = new CorsConfiguration();
        corsConfig.addAllowedOrigin("*"); // 允许的来源
        corsConfig.addAllowedMethod("*"); // 允许所有HTTP方法
        corsConfig.addAllowedHeader("*"); // 允许所有HTTP请求头
//        corsConfig.setAllowCredentials(true); // 允许携带凭证
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfig);

        return new CorsFilter(source);
    }
}

解释与注意事项

下面来解释一下代码。

@Configuration 注解标识这是一个配置类。
@Bean 注解标识 corsFilter() 方法将返回一个 CorsFilter 对象，该对象用于处理跨域请求。
在 corsFilter() 方法中，创建了一个 CorsConfiguration 对象，并配置了一些跨域规则，如允许的来源、允许的方法和允许的头部。

注意，这里注释了

corsConfig.setAllowCredentials(true); 

是因为使用 setAllowCredentials(true) 时，addAllowedOrigin 不再允许通配符 *，而是要指定具体的允许来源。使用凭证时，浏览器不允许将凭证发送到通配符来源。

所以在生产环境中，我们一般下面这样配置的

        corsConfig.addAllowedOrigin("前端在服务器的ip地址"); // 允许的来源
        corsConfig.addAllowedMethod("*"); // 允许所有HTTP方法
        corsConfig.addAllowedHeader("*"); // 允许所有HTTP请求头
        corsConfig.setAllowCredentials(true); // 允许携带凭证

将允许的来源设定为前端的运行的ip地址，然后允许携带凭证。

还有朋友可能会有疑问，跨域配置是怎么生效的？

答案是下面的代码

  UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfig);

代码创建了一个 UrlBasedCorsConfigurationSource 对象，并注册了上述配置信息，指定了对所有路径都生效。
这样配置后，Spring 应用程序将允许来自任何来源（*）的请求，支持任何 HTTP 方法，允许任何 HTTP 头，如果需要可以携带凭证。跨域问题就解决啦！