CORS 跨域请求一种解决方案

平常工作难遇到这类问题, 一般搭建新系统或搭建系统二时需要复用系统一一些前后端能力, 可能会遇到跨域拦截问题.

这里提供一种基于服务器解决方案. 更多其他方案, 详细细节可自行查阅更多资料, 写一些前后端交互最小现场.

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

其实一般浏览器请求服务器, 会发两次请求, 第一次 OPTIONS 预检请求, 判断是否被允许跨域,

如果此次通信协议被允许, 那第二次真实请求就会被浏览器放行.

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

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

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

基于服务适配的一种解决方案

首先以最小现场的交互架构图, 浏览器请求最外层网关, 然后网关转发到具体的 Server.

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

我们大致知道 CORS 问题是怎么回事, 只需要保证 Browser Client  HTTP OPTIONS  请求到 Gateway ,

然后 Gateway 到 Server 完整的链路 OK, 这个问题就解决了.

这里涉及一些 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 也需要同样的改造, 思路也是类似. 但知易行难, 各行各业都类似.