CORS 跨域请求一种后端适配解决方案

平常工作难遇到这类问题, 一般搭建新系统或搭建系统二时需要复用系统一一些前后端能力, 可能会遇到跨域拦截问题. 这里提供一种基于服务器解决方案. 更多其他方案, 详细细节可自行查阅更多资料, 写一些前后端交互最小现场.  

 

首先理解 CORS 跨域拦截是什么回事？

其实一般浏览器请求服务器，会发两次请求：

1. 第一次 OPTIONS 预检请求，判断是否被允许跨域。
2. 如果此次通信协议被允许，那么 第二次 真实请求就会被浏览器放行。

注意：涉及这类问题挺复杂的，我所交流和知道细节的也不一定准确，更多是工程实战经验。

知道这个原理，自然也就大致知道解决办法了。

只要 第一次浏览器的 HTTP OPTIONS 协议和服务链交互 OK，那么这个跨域请求就会 PASS 放行。

 

基于后端适配的一种解决方案

# 最小现场交互架构图

+-------------+ +-------------+ +--------------------+
| Browser | <----> | Gateway | <----> | Server |
+-------------+ +-------------+ +--------------------+

Browser 发送 HTTP 请求到最外层 Gateway，Gateway 处理后转发给 Server。

我们大致知道 CORS 问题是怎么回事，只需要保证：

1. Browser Client 的 HTTP OPTIONS 请求能到达 Gateway 并被正确处理
2. Gateway 到 Server 的完整链路能够正常处理 OPTIONS 请求

这样跨域问题就可以解决。

这里涉及较多 HTTP 协议交互问题 具体细节可以 和 ChatGPT 进一步沟通 或者 查阅相关资料。

Server 应答 OPTIONS 协议最小可行模板

.... 所有请求进入  (第一优先级拦截器) 下面协 Server 议处理环节

        // 默认全添加 CORS 头, 默认允许跨域访问
        origin := r.Header.Get("Origin")
        if origin == "" {
            origin = "*"
        }
        w.Header().Set("Access-Control-Allow-Origin", origin) // 允许所有来源
        w.Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE, UPDATE")
        w.Header().Set("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization")
        w.Header().Set("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Cache-Control, Content-Language, Content-Type")
        w.Header().Set("Access-Control-Allow-Credentials", "true") // 允许跨域携带 Cookie


        // 处理预检请求
        if r.Method == http.MethodOptions {
            w.WriteHeader(http.StatusNoContent)
            return
        }
 
... 后续转到具体业务服务相关逻辑. 

对于 Gateway 也需要同样的改造, 思路也是类似. 但知易行难, 各行各业都类似.