Web前端跨域问题与解决方案

20XX/XX/XXWeb前端跨域问题与解决方案汇报人:XXXCONTENTS目录01

课程开篇介绍02

跨域的概念与成因03

常见跨域场景梳理04

JSONP跨域解决方案CONTENTS目录05

CORS跨域解决方案06

其他常用解决方案07

总结与练习课程开篇介绍01什么是跨域问题

跨域问题的定义跨域是指浏览器因同源策略限制，拒绝不同域名、端口或协议间的资源请求的现象。

跨域问题的触发场景比如前端页面从域名A请求域名B的接口数据，就会触发浏览器的跨域拦截机制。

跨域问题的核心根源其核心源于浏览器的同源策略，目的是防范恶意网站窃取用户敏感信息。学习目标与要点

掌握跨域核心概念清晰理解同源策略定义及跨域产生的根本原因，能准确判断常见跨域场景。

熟练运用主流跨域方案熟练掌握CORS、JSONP等主流跨域方案的实现逻辑，可结合实际场景选择适配方案。

排查解决跨域实战问题能快速定位项目中跨域报错原因，参考淘宝、京东前端跨域案例完成问题修复。跨域的概念与成因02同源策略的核心定义同源指域名、协议、端口三者完全一致，浏览器以此限制不同源页面间的资源交互保障安全。同源策略的资源访问限制它禁止非同源页面读取Cookie、LocalStorage等数据，也限制DOM元素的跨源操作。同源策略的安全价值体现比如防范恶意网站窃取用户在银行网站的登录信息，是浏览器安全防护的重要防线。浏览器同源策略介绍跨域问题产生根源

浏览器同源策略限制浏览器为保障安全，执行同源策略，仅允许同协议、域名、端口的页面相互访问数据。

域名与端口差异导致如前端页面部署在localhost:3000，请求localhost:8080接口，端口不同触发跨域。常见跨域场景梳理03域名不同的跨域场景

主域名相同、子域名不同的跨域如网页部署在，请求的接口，属于子域名不同引发的跨域场景。

主域名不同的跨域像网页在域名下，请求域名的资源，这类完全不同主域名的情况属于典型跨域。

域名与IP地址访问的跨域比如网页通过域名访问，却请求对应服务器的IP地址接口，也会触发跨域限制。主站与业务子域名跨域如淘宝主站与商品子域名间，请求资源会触发跨域限制。主站与用户中心子域名跨域像京东主站与用户中心互访，会因子域名不同引发跨域问题。主站与支付子域名跨域例如支付宝主站与支付网关交互，属于典型子域名跨域场景。子域名不同的跨域场景端口协议不同的跨域场景

HTTP与HTTPS协议差异跨域如使用HTTP的前端页面调用HTTPS的后端接口，浏览器会因协议不匹配直接拦截请求。端口号不同引发跨域本地8080端口的前端页面请求8081端口的后端服务，会触发同源策略限制导致跨域。JSONP跨域解决方案04JSONP实现原理

利用script标签跨域特性script标签不受同源策略限制，可加载其他域名下的JS文件，这是JSONP实现的核心基础。

自定义回调函数接收数据提前在页面定义回调函数，服务端将数据包裹在函数名中返回，实现数据传递。

服务端动态生成响应内容服务端解析请求中的回调参数，将数据拼接成函数调用格式的JS代码返回给客户端。JSONP代码实现步骤前端定义回调函数提前在全局作用域定义接收数据的回调函数，如`handleData`，用于处理后端返回的JSON数据。后端包装响应数据后端获取请求参数中的回调函数名，将JSON数据包裹在该函数调用中，如`handleData({data:xxx})`。前端动态创建script标签通过JavaScript创建script标签，将src指向后端接口并携带回调函数名参数，发起跨域请求。兼容性覆盖广泛JSONP支持几乎所有老旧浏览器，像IE6这类不支持CORS的浏览器也能正常实现跨域请求。请求类型受限JSONP仅支持GET请求，无法满足POST、PUT等复杂请求场景，比如提交表单数据的需求。存在安全风险若JSONP请求的第三方接口被恶意篡改，易引发XSS攻击，曾有电商平台因此出现用户信息泄露问题。JSONP优缺点总结CORS跨域解决方案05CORS核心原理说明Origin请求头校验浏览器会自动携带Origin字段，服务器校验该字段是否在许可列表，以此判断是否允许跨域。Access-Control响应头控制服务器通过返回Access-Control系列响应头，明确告知浏览器可允许的跨域操作范围。简单请求与预检请求区分简单请求直接发送，非简单请求需先发送OPTIONS预检请求，获许可后再发真实请求。简单请求的配置方法

01设置Access-Control-Allow-Origin响应头在服务器端配置该字段，指定允许跨域的域名，如设置为""来放行特定来源。

02确保请求方法符合规范限定请求方法为GET、HEAD、POST中的一种，同时避免自定义头部，满足简单请求的方法要求。

03控制请求头部字段范围仅允许Accept、Accept-Language等CORS规定的头部字段，不可添加自定义复杂头部。预请求的配置方法01设置Access-Control-Request-Method响应头明确允许的HTTP请求方法，比如配置为GET,POST,PUT，告知浏览器服务器支持的请求类型。02配置Access-Control-Request-Headers响应头指定允许自定义请求头，例如允许token、content-type等，避免预请求因头信息被拦截。03设置Access-Control-Max-Age响应头配置预请求结果缓存时长，比如设为86400秒，减少重复发送预请求的频次。兼容性广泛，适配主流场景CORS被绝大多数现代浏览器支持，像谷歌Chrome、火狐Firefox等，能适配多数前端跨域开发场景。配置灵活，支持自定义规则可通过HTTP头自定义跨域规则，比如允许指定域名访问，适配不同业务的权限管控需求。存在预检请求开销复杂请求会触发OPTIONS预检请求，增加网络交互次数，在高频请求场景下会拖慢响应速度。易出现配置疏漏风险若配置不当，比如误设允许所有域名访问，可能导致敏感数据泄露，引发安全隐患。CORS优缺点总结其他常用解决方案06代理服务器解决跨域

01Nginx反向代理配置通过Nginx配置反向代理，将前端请求转发至后端服务器，如配置location规则实现跨域请求转发。

02Node.js中间件代理借助Node.js的http-proxy-middleware中间件，搭建代理服务器转发前端跨域请求至目标接口。

03Apache代理设置在Apache服务器中配置ProxyPass等规则，将前端跨域请求代理到对应后端服务，规避同源限制。postMessage解决跨域postMessage基础原理与调用逻辑postMessage是HTML5新增API，允许不同源窗口间通信，通过targetWindow.postMessage()发送数据。postMessage跨域实战场景如腾讯文档嵌入第三方评论系统，借助postMessage实现二者跨域数据交互与状态同步。postMessage安全防护要点需验证消息源origin与接收方source，避免恶意数据注入，保障跨域通信安全。document.domain适用场景说明该方案仅适用于同一主域名下的子域名跨域，如和间的跨域场景。document.domain配置操作步骤需在两个页面中同时设置document.domain为相同主域名，如均设为，实现跨域通信。document.domain局限性分析此方案无法解决不同主域名的跨域问题，且存在一定安全风险，易被恶意网站利用。document.domain解决跨域解决跨域

跨域原理剖析属性可在不同页面共享且值能存2MB左右，利用这一特性实现跨域数据传递。

静态页面承载跨域数据需准备同源静态页面作为中转，非同源页面将数据存入后跳转至该页面。

实战场景案例演示如电商平台跨域获取商品数据，通过在非同源商品页与同源详情页间传递信息。总结与练习07方案选型建议依据业务场景匹配方案若需实现复杂数据交互，优先选CORS方案，如淘宝跨域调取用户收货地址数据就采用此方案。考量浏览器兼容性选方案兼容低版本IE浏览器时，可选用JSONP方案，早期京东部分跨域功能依赖该方案实现。结合安全需求选方案对安全级别要求高的场景，推荐使用Nginx反向代理，像美团后台管理系统就采用该方式。