1.引入

        我们在前端发送网络请求时是否遇到了如下图所示的问题：

我们看到，最后一条网络请求显示CORS error。

2.同源策略

        在解决跨域问题（CORS error）前，我们有必要先介绍一下同源策略。

        同源策略是浏览器的一个重要的安全机制，它用于限制一个源的文档或者它加载的脚本与另一个源的资源进行交互。它可以防止恶意文档，减少我们被攻击的可能性。

        在两个URL中，协议，端口和主机都相同（三者同时满足）的话我们就说这两个URL的同源的，否则这两个URL就是非同源的。

3.跨域问题原理

        在现代大部分项目中，都是采用的前后端分离架构，前端项目和后端项目部署在不同的服务器上，跨域问题就不可避免了。

        当触发同源策略时，浏览器会在正式请求发送前发送一个预检请求（Preflight Request），在有必要时，这个预检请求是浏览器自动发出的，不需要前端开发者自己去发送这样的请求，请求的类型为OPTIONS，其作用是判断服务器是否支持CORS协议（其实就是允不允许跨域请求）以及是否允许特定的请求方法和标头。例如：

OPTIONS 后端URL
Access-Control-Request-Method: DELETE
Access-Control-Request-Headers: origin, x-requested-with
Origin: 请求的来源（例如：http://localhost:8080）

上面预检请求的Access-Control-Request-Method字段的值是我们正式请求的请求方法，意思是：我接下来要发送一个网络请求，请求方法为DELETE，可以吗？

如果后端服务器支持CORS协议，则会响应这个预检请求，并且会在预检请求的响应头上添加指定字段，例如：

HTTP/1.1 200 OK
Content-Length: 0
Connection: keep-alive
Access-Control-Allow-Origin: 请求的来源
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Max-Age: 86400

其中，Access-Control-Allow-Methods字段的意思是：你可以发送POST, GET, OPTIONS, DELETE其中任意一个类型的请求，都支持跨域。

        这时，我们的正式请求才会被发出，否则就会出现文章开头的问题。

4.解决方案

        下面以Java框架SpringBoot为例，详细介绍如何在后端配置跨域。

1.局部配置

        我们可以在Controller类上使用注解@CrossOrigin。

@RestController
@RequestMapping("/test")
@CrossOrigin(origins = "*")
public class TestController{
    @GetMapping("/getStr")
    public String getStr(){
        return "Hello,你通过网络请求获取了一个字符串";
    }
}

        其中，@CrossOrigin注解的参数origins是请求的来源地址，这些地址可以通过预检请求，如果不是这些源，则正式的请求会被拒绝，如下图所示：

        我们将origins字段设置为*意思是：通过所有来源的预检请求。

2.全局配置

        局部配置太麻烦，需要为每一个Controller类都配置一次。我们可以通过实现WebMvcConfigurer接口并重写addCorsMapping()方法对全局进行一个统一的跨域配置。

@Configuration
public class CorsConfig implements WebMvcConfigurer{
    @Override
    public void addCorsMappings(CorsRegistry registry){
        registry.addMapping("/**")
                .allowedOrigins("*")  //允许的请求的来源
                .allowedMethods("GET","POST","PUT","DELETE","OPTIONS")  // 允许的请求方法
                .allowedHeaders("*"); //允许的请求头
    }
}

完成上述配置后，我们的请求就可以成功发出了：

5.结语

        如有错误、表述不清或其他建议，请您指出，小弟在此跪谢了！

                                                                                                                              日期：2026-01-25