很多刚学前后端的人第一次看到CORS error 跨域 Access-Control-Allow-Origin都会特别懵。甚至会感觉明明后端接口没问题 为什么前端请求失败其实问题不在后端逻辑。而在浏览器安全机制一、什么是 CORSCORS全称Cross-Origin Resource Sharing中文跨域资源共享一句话浏览器允许不同网站之间互相请求数据的规则二、为什么会有跨域浏览器默认不允许不同源之间互相访问这是浏览器的同源策略三、什么是“同源”必须这三个都一样协议 域名 端口才叫同源四、举例重点这个算同源http://localhost:3000 http://localhost:3000这个不算端口不同http://localhost:3000 http://localhost:8080这个也不算协议不同http://example.com https://example.com这个也不算域名不同http://a.com http://b.com五、为什么浏览器要限制因为如果不限制恶意网站可能偷偷请求你的银行接口非常危险。六、最经典跨域场景前端运行http://localhost:5173Vue/React 开发服务器。后端Gin运行http://localhost:8080前端请求后端fetch(http://localhost:8080/user)七、结果浏览器直接报错CORS error八、为什么 Postman 没问题很多新人这里会懵。Postman不是浏览器。没有同源策略所以不会拦截九、真正拦截的是谁不是Gin也不是Go而是浏览器十、CORS 本质是什么本质就是后端告诉浏览器 “我允许你跨域访问”十一、浏览器怎么知道允不允许因为后端会返回响应头Header十二、最重要响应头必须记住Access-Control-Allow-Origin十三、什么意思例如Access-Control-Allow-Origin: *表示允许所有网站访问十四、Gin 如何解决 CORS最简单使用中间件。十五、安装 cors 中间件go get github.com/gin-contrib/cors十六、最简单写法重点packagemainimport(github.com/gin-contrib/corsgithub.com/gin-gonic/gin)funcmain(){r:gin.Default()// 开启 CORSr.Use(cors.Default())r.GET(/hello,func(c*gin.Context){c.JSON(200,gin.H{msg:hello,})})r.Run(:8080)}十七、这里到底发生了什么r.Use(cors.Default())会自动给响应头加Access-Control-Allow-Origin: *于是浏览器发现后端允许跨域就不会拦截。十八、完整请求流程重点前端 fetch ↓ 浏览器发现跨域 ↓ 发送请求 ↓ Gin 返回 Header ↓ Access-Control-Allow-Origin ↓ 浏览器检查 ↓ 允许访问十九、前端为什么能收到数据了因为浏览器看到后端允许跨域所以不再阻止。二十、CORS 是浏览器安全机制一定记住CORS 不是 Go 的规则 不是 Gin 的规则 不是 HTTP 的规则它是浏览器安全规则二十一、什么是预检请求重点很多时候你会发现明明只发了一次请求 为什么后端收到两次这就是预检请求OPTIONS二十二、什么时候会触发预检例如PUT DELETE Authorization application/json这些可能触发OPTIONS 请求二十三、浏览器为什么要预检浏览器会先问“后端允许吗”二十四、流程图重点浏览器 ↓ 先发 OPTIONS ↓ 后端返回允许 ↓ 浏览器再发真正请求二十五、为什么后端必须处理 OPTIONS否则浏览器会认为不允许跨域二十六、cors.Default() 帮你做了什么它会自动1. 处理 OPTIONS2. 添加允许跨域 Header3. 设置默认规则所以非常方便。二十七、自定义 CORS重点真实项目一般不会允许所有网站二十八、自定义允许域名r.Use(cors.New(cors.Config{AllowOrigins:[]string{http://localhost:5173,},AllowMethods:[]string{GET,POST,PUT,DELETE,},AllowHeaders:[]string{Origin,Content-Type,Authorization,},}))二十九、AllowOrigins表示允许哪些前端访问三十、AllowMethods允许哪些 HTTP 方法。三十一、AllowHeaders允许哪些请求头。例如AuthorizationJWT 登录经常会用。三十二、JWT 为什么经常触发 CORS因为JWT通常会带Authorization请求头。于是浏览器会触发预检 OPTIONS三十三、为什么真实项目一定要配 CORS因为前后端几乎都是分离的。前端localhost:5173后端localhost:8080天然跨域。三十四、最经典错误1. 后端没开 CORS浏览器直接拦截。2. OPTIONS 没处理预检失败。3. Authorization 没允许JWT 请求失败。三十五、最后一句总结必须记住CORS 本质浏览器的跨域安全机制核心思想后端通过 Header 告诉浏览器 “我允许你访问”Gin 最简单解决方案r.Use(cors.Default())真正核心流程前端请求 ↓ 浏览器检查是否跨域 ↓ 后端返回允许跨域 Header ↓ 浏览器决定是否放行
