news 2026/6/16 5:04:53

CORS跨域解决终极指南

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
CORS跨域解决终极指南

0. 同源策略详解

同源策略(Same-Origin Policy)是浏览器最核心的安全策略之一,它限制了来自不同源的文档或脚本如何与当前文档进行交互。

解决方法:后端需要实现 CORS 支持,这正是这节要详细讲解的内容。

1.CORS

摘要:本文详细介绍了 CORS(跨域资源共享)的原理、限制及解决方案。首先解释了同源策略的概念及其对前后端分离架构的影响,然后阐述了 CORS 的工作机制,包括预检请求和响应头配置。重点讲解了如何使用 Go 语言的 Gin 框架配合cors中间件实现跨域访问控制,包括各种配置选项的含义和用法。最后通过完整的代码示例展示了如何在实际项目中配置 CORS 中间件和处理跨域请求。

判断是否是同一个源:协议、域名、端口。

同源访问是浏览器的核心安全策略。

当前后端分离, 前后端是不同的源,浏览器先访问前端,当前端再去访问后端时,会触发浏览器的同源访问策略,因为前后端此时不是同一个源,此时请求会发出,但响应被浏览器拦截,发现不同源后,拒绝把响应返给前端。

①浏览器会对跨域做出哪些限制?

例如:[源A]和[源B]是非同源的,则浏览器会有如下限制:

  1. DOM访问限制:源A的脚本不能读取和操作源B的DOM
  2. Cookie访问限制:源A不能访问源B的cookie
  3. 响应数据限制:源A可以给源B发请求,但是无法获取源B的请求(这个是主要要解决的问题,也是遇到最多的问题 )

②CORS 概述 CORS 全称: Cross - Origin Resource Sharing
(跨域资源共享),是用于控制浏览器校验跨域请求的一套规范,服务器依照 CORS 规范,添加特定响应头来控制浏览器校验,大致规则如下:

  • 服务器明确表示拒绝跨域请求,或没有表示,则浏览器校验不通过
  • 服务器明确表示允许跨域请求,则浏览器校验通过 备注说明:使用 CORS 解决跨域是最正统的方式,且要求服务器是"自己人",因为使用cors解决跨域是要改动服务器代码。

③解决思路:当服务器接收到探测options请求后,如果请求的源在白名单里,则在响应头里加上Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers
等关键参数,浏览器拦截响应数据,看到有这些响应头,就知道要放行,于是客户端就得到了数据,否则,客户端得不到数据。

我们可以添加一个中间件,对每个请求的执行上面的操作,第三方库cors实现了这点,我们只需要配置参数就可以了,如下

Config是配置cors中间件时的所有可选项

cors.Config{AllowAllOrigins:false,//true标识允许所有域名AllowOrigins:nil,//允许的域名列表AllowOriginFunc:nil,//自定义函数来动态判断是否允许某个域名AllowOriginWithContextFunc:nil,//同上,但是传入了gin.ContextAllowMethods:nil,//允许使用的HTTP方法,未设置时默认简单方法集合:GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS。AllowPrivateNetwork:false,//是否允许私有网络(如局域网 IP)访问AllowHeaders:nil,//非简单请求时,允许的请求头(如 X-Custom-Header、 Authorization)中,允许客户端实际发送的头列表。AllowCredentials:false,//是否允许携带凭证:Cookie、HTTP认证(token)、客户端证书等ExposeHeaders:nil,//指定哪些响应头能被前端代码读取MaxAge:0,//预检请求(OPTIONS)的结果可以被缓存多久AllowWildcard:false,//是否支持通配符匹配域名(如 http://*.example.comAllowBrowserExtensions:false,CustomSchemas:nil,AllowWebSockets:false,AllowFiles:false,//是否允许 file:// 协议OptionsResponseStatusCode:0,}

[!CAUTION]

哪些是需要在ExposeHeaders中指明的?哪些不需要?

默认情况下,浏览器只允许前端 JavaScript 读取以下6 个简单响应头

  • Cache-Control
  • Content-Language
  • Content-Type
  • Expires
  • Last-Modified
  • Pragma

除此之外的所有响应头,如果你希望前端(例如通过fetchXMLHttpRequest)能读取到,都必须在 CORS 配置的ExposeHeaders显式列出

常见需要显式暴露的响应头举例

响应头常见用途
Authorization登录后后端返回的 Bearer token 有时会放在响应头中
X-Total-CountREST API 返回数据总数(分页用)
X-Request-Id用于请求追踪和调试
X-Pagination-PageX-Pagination-Limit自定义分页信息
Content-Disposition文件下载时的文件名
Retry-After限流时告知客户端多久后重试
Location重定向或创建资源时返回新 URL
任何自定义头(如X-User-IdApp-Version业务需要的额外信息

代码示例

typeteacherstruct{Namestring`json:"name"`Ageint`json:"age"`Sexstring`json:"sex"`}varteachers=[]teacher{{"小红",12,"女"},{"小X",14,"男"},{"小A",13,"女"},}funcverifAuth(authorizationstring)bool{ifauthorization==""{returnfalse}returntrue}funcmain(){//导入日志log1:=logs.Logger1// 2. 初始化 Ginr:=gin.Default()// 3. 设置 CORS 中间件(全局生效,白名单来自配置)r.Use(cors.New(cors.Config{AllowOrigins:[]string{"http://localhost:63342","https://www.u2tool.com"},AllowMethods:[]string{"POST","GET","PUT","PATCH","DELETE","HEAD","OPTIONS"},AllowHeaders:[]string{"set-cookie","Authorization","Content-Type"},AllowCredentials:true,ExposeHeaders:[]string{"authorization"},MaxAge:1*time.Minute,}))// 4. 只有登录才能访问的业务(完全不需要写任何 CORS 代码)r.GET("/api/user",func(c*gin.Context){authorization:=c.GetHeader("authorization")ifverifAuth(authorization)==false{log1.Error("authorization 是空")c.JSON(http.StatusUnauthorized,gin.H{})return}log1.Info("获取到了token=",authorization)c.JSON(http.StatusOK,gin.H{"code":200,"data":teachers,"message":"请求成功"})})//登录r.POST("/api/order",func(c*gin.Context){vartoken="fake_abc123DEF456GHI789JKL0MNOpqrSTUvwxYZ"c.Header("Authorization",token)c.JSON(http.StatusOK,gin.H{"code":200,"data":teachers,"message":"请求成功"})})// 5. 启动服务r.Run(":8080")}

2.凭证

有三种:token、cookie、TLS(少见,用于双向TSL验证)

Cookie 与 Token的核心区别

特性Cookie(自动发送)Token(手动携带)
发送方式浏览器自动附加到请求的Cookie头中,前端无需写代码前端需要手动从存储(localStorage/sessionStorage)读取并设置Authorization: Bearer <token>
跨域限制默认会跨域发送(同源策略)。要跨域需配置withCredentials: true且后端AllowCredentials: true跨域时同样需要后端 CORS 支持Authorization头(在AllowHeaders中),但前端可手动添加该头
存储位置由浏览器管理,可通过HttpOnly禁止 JS 读取(防XSS)前端代码可控(localStorage/sessionStorage),易受 XSS 攻击
CSRF 风险存在 CSRF 风险(恶意站点利用已保存的 Cookie 发起请求),需用SameSite、CSRF Token 等防护无(因为攻击者无法读取 token 并手动添加到Authorization头)
移动端/非浏览器不支持(因为无浏览器自动管理 Cookie)广泛支持,token 可明文发送

cookie流程:

  1. 用户登录成功,服务器返回:

    Set-Cookie: sessionId=abc123; Path=/; HttpOnly; Secure; SameSite=Lax
  2. 浏览器保存这个 Cookie。

  3. 之后用户访问同域的任何页面、API(图片、AJAX等),浏览器自动加上:

    Cookie: sessionId=abc123
  4. 服务器收到后就知道是同一个用户

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/16 5:03:59

TC118A 单通道直流马达驱动器

一、特点  单通道内置功率MOS 全桥驱动  驱动前进、后退、停止及刹车功能  内置迟滞热效应过热保护功能  低导通电阻&#xff08;0.5Ω/1000mA&#xff09;  最大连续输出电流可达1.8A,峰值2.5A  无需外围大滤波电容&#xff0c;只需小贴片电容  采用DIP-8、SOP-…

作者头像 李华
网站建设 2026/6/16 4:55:54

LLM成本优化2026年中实战:把Token花费砍半的7个工程手段

MCP&#xff08;Model Context Protocol&#xff09;自 2024 年底开源以来&#xff0c;已经成为 AI Agent 工具调用的事实标准。2026 年 MCP 2.0 在多模态、企业级、跨平台三个方向全面进化。本文从工程实践出发&#xff0c;系统讲解 MCP 2.0 的完整落地。 一、MCP 核心架构回顾…

作者头像 李华
网站建设 2026/6/16 4:53:57

数据分析选Python还是R?一文帮你看清python ide的门道

与R一道被视作是不可或缺的数据科学编程语言, 理想状态之下, 这些语言应当被掌握, 然而要是你身为数据科学初学者, 何处才是良好的起始点呢?和R有什么区别&#xff1f;虽然R语言更专业&#xff0c;但是是为各种用例设计的通用编程语言。要是你头一回进行编程学习, 你兴许会发觉…

作者头像 李华
网站建设 2026/6/16 4:48:49

终极指南:3分钟破解城通网盘限速,免费获取满速下载

终极指南&#xff1a;3分钟破解城通网盘限速&#xff0c;免费获取满速下载 【免费下载链接】ctfileGet 获取城通网盘一次性直连地址 项目地址: https://gitcode.com/gh_mirrors/ct/ctfileGet 你是否曾因城通网盘的蜗牛下载速度而抓狂&#xff1f;几十KB/s的限速让下载大…

作者头像 李华
网站建设 2026/6/16 4:48:49

Excel打造ERP开发计划表:从WBS到甘特图的项目管理实战

1. 项目概述&#xff1a;为什么我们需要一张Excel版的ERP开发计划表&#xff1f;在任何一个ERP&#xff08;企业资源计划&#xff09;系统的开发项目中&#xff0c;混乱是最大的敌人。需求像野草一样疯长&#xff0c;任务像雪球一样越滚越大&#xff0c;而开发、测试、上线的时…

作者头像 李华