惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园_首页
阮一峰的网络日志
阮一峰的网络日志
S
Secure Thoughts
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
C
Cyber Attacks, Cyber Crime and Cyber Security
T
Threat Research - Cisco Blogs
P
Privacy & Cybersecurity Law Blog
The Hacker News
The Hacker News
H
Heimdal Security Blog
W
WeLiveSecurity
L
LINUX DO - 热门话题
Hacker News: Ask HN
Hacker News: Ask HN
WordPress大学
WordPress大学
The Last Watchdog
The Last Watchdog
Hugging Face - Blog
Hugging Face - Blog
博客园 - 【当耐特】
D
DataBreaches.Net
I
Intezer
Webroot Blog
Webroot Blog
C
Cisco Blogs
AWS News Blog
AWS News Blog
博客园 - 聂微东
T
The Blog of Author Tim Ferriss
V
Vulnerabilities – Threatpost
罗磊的独立博客
Google DeepMind News
Google DeepMind News
N
Netflix TechBlog - Medium
Schneier on Security
Schneier on Security
宝玉的分享
宝玉的分享
博客园 - 叶小钗
PCI Perspectives
PCI Perspectives
D
Docker
Scott Helme
Scott Helme
NISL@THU
NISL@THU
J
Java Code Geeks
B
Blog RSS Feed
Google Online Security Blog
Google Online Security Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
T
The Exploit Database - CXSecurity.com
AI
AI
美团技术团队
Cloudbric
Cloudbric
月光博客
月光博客
P
Proofpoint News Feed
T
Tailwind CSS Blog
Google DeepMind News
Google DeepMind News
小众软件
小众软件
www.infosecurity-magazine.com
www.infosecurity-magazine.com
The Cloudflare Blog
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org

博客园 - 喜欢Ⅰ

先避免毁灭性错误,再谈聪明决策 通往天堂的三个阶梯 人类随机数趣闻 - 即使人们会觉得它更随机,但实际上它更不随机 C 里面如何使用链表 list 项目代码套路 墨菲定律 - 人类一种误判心理 消息队列, 一种取舍的选择 Redis Stream 自我的智慧 市场教父 André Kostolany Exception Handling Considered Harmful MySQL CREATE TABLE Template 模板设计简单交流 字符串转整型 atomic 原子自增工程案例 HTTP 尝试获取 Client IP 对炒股看法 吃饱年代 我是个怎样的人 格林童话之祖父和孙子 Linux 守护进程 智慧 ~ 引子 ~ 三则故事 交易人生 大道至简
CORS 跨域请求一种后端适配解决方案
喜欢Ⅰ · 2025-03-16 · via 博客园 - 喜欢Ⅰ

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

首先理解 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 也需要同样的改造, 思路也是类似. 但知易行难, 各行各业都类似.