前端 跨域解决方案

一、什么是跨域协议、域名、端口三者有任意一个不一样就是跨域。浏览器出于安全考虑会限制跨域请求这就是同源策略Same-Origin Policy。举例https://www.baidu.com协议https域名www.baidu.com端口443默认省略只要一个不同就是跨域http://baidu.com→ 协议不同https://map.baidu.com→ 子域名不同https://baidu.com:8080→ 端口不同二、为什么要有跨域限制核心目的防止 CSRF 攻击、窃取 Cookie、窃取用户信息。如果没有同源限制恶意网站可以随便请求你的银行接口、拿你的登录态。三、前端常见跨域解决方案1. CORS最常用、最标准Cross-Origin Resource Sharing跨域资源共享。由后端在响应头里声明 “允许哪些域名跨域”浏览器遵守规则放行。2. 核心原理跨域请求能发到后端但浏览器会检查响应头有 CORS 头 → 给前端数据没有 → 拦截前端拿不到结果后端在响应头里加允许跨域的字段浏览器识别后放行。关键响应头Access-Control-Allow-Origin: *或指定域名Access-Control-Allow-Methods: GET,POST,PUT...Access-Control-Allow-Headers: Content-Type...Access-Control-Allow-Credentials: true允许带 Cookie特点简单请求直接跨域复杂请求先发OPTIONS 预检请求2. JSONP老方案只支持 GET利用script标签不受跨域限制的特点。流程前端定义一个全局函数fn动态创建script srchttp://xxx?callbackfn后端返回fn(数据)浏览器执行 fn拿到数据缺点只 GET、不安全、不支持 POST。3. 代理服务器开发最常用前端请求自己的服务器 → 服务器转发请求到目标跨域接口服务器之间没有跨域限制。常见webpack devServer proxyvite proxyNginx 反向代理4. Nginx 反向代理生产常用配置 Nginx把接口路径转发到目标服务器浏览器看起来是同域。5. postMessageiframe 跨域页面与内嵌 iframe 之间跨域通信。6. WebSocket不受同源策略限制。7. document.domain仅限同一主域名不同子域比如a.xxx.com和b.xxx.com设置document.domain xxx.com即可跨域。四、面试高频问答1. 什么是简单请求、复杂请求简单请求方法GET/HEAD/POST请求头只有Accept、Accept-Language、Content-Language、Content-Type仅 form-data、urlencoded、text/plain复杂请求PUT/DELETE自定义头Content-Type: application/json会先发一次OPTIONS 预检请求确认允许跨域才发真实请求。2. 跨域时为什么能发出去但浏览器拦截请求确实发到后端了后端也返回了。但浏览器检查响应头没有 CORS 字段浏览器自己拦截不给前端数据。3. Cookie 跨域要注意什么前端withCredentials: true后端Access-Control-Allow-Credentials: trueAllow-Origin不能为*必须写具体域名4. 最优跨域方案是什么开发环境代理proxy生产环境CORS / Nginx 反向代理五、一句话总结跨域是浏览器同源策略导致的限制解决核心是后端允许CORS或绕开浏览器代理/JSONP现代项目首选CORS 代理。