前言做项目对接接口时99%的人都会遇到红色报错No Access-Control-Allow-Origin header is present on the requested resource这就是跨域问题。跨域是前端开发无法避开、面试必问、项目必遇的核心知识点。本篇带你彻底搞懂为什么跨域、哪些情况跨域、五种解决方案、各自优缺点、适用场景。一、什么是同源策略跨域根源同源策略是浏览器的安全机制目的防止恶意网站窃取用户数据。同源三要素必须全部一致协议http/https域名localhost / ip / 域名端口号8080 / 3000 / 5500只要有一个不一样直接跨域请求被浏览器拦截。二、常见跨域场景举例前端localhost:5500后端localhost:3000端口不同 跨域前端http后端https协议不同 跨域三、注意谁跨域谁不跨域跨域只限制浏览器AJAX/Fetch请求以下资源不跨域img 图片引用script 脚本引入link 样式引入这也是 JSONP 跨域的核心原理。四、前端五大跨域解决方案最全合集1. CORS 后端开启跨域企业主流后端设置响应头允许前端域名访问。优点正式项目唯一方案、安全、稳定、支持所有请求缺点需要后端配合2. 本地代理 Proxy开发环境必备Vue / React / Vite 项目全部使用代理跨域。原理服务器之间请求不跨域浏览器与本地服务器同源开发环境最优解无需改后端代码。3. JSONP 跨域老项目兼容利用 script 标签不跨域的特性只能发 GET 请求。缺点不支持POST、不安全、现在基本淘汰4. 后端网关转发 Nginx线上项目常用统一域名、统一端口、彻底消除跨域5. 浏览器关闭安全策略纯本地调试关闭浏览器跨域限制仅用于本地测试不能上线。五、面试高频问答必背满分话术1. 为什么会跨域浏览器同源策略安全机制协议、域名、端口不一致浏览器拦截异步请求。2. 跨域是前端问题还是后端问题是浏览器问题不是接口问题。后端数据正常返回浏览器拦截响应。3. 开发环境和生产环境分别用什么跨域方案开发环境使用本地代理Proxy生产环境使用CORS或Nginx反向代理。4. JSONP和CORS区别JSONP只能GET、不安全、是前端hack方案CORS支持所有请求、正规标准、安全稳定。六、本篇结语到这里你彻底搞定了前端网络底层闭环AJAX底层原理 → 手写请求源码 → 异步通信机制 → 跨域根源与全套解决方案。从此项目对接接口、调试网络问题、面试网络原理题全部畅通无阻。整套前端基础 底层 网络 工程化体系已经无限接近中级前端水平。
