1、什么是跨域所谓的跨域即违背了同源策略同源策略协议、主机号、端口号需要一致2、解决跨越的方法1cors是真正意义上解决跨域后端处理CORS将请求分为两类简单请求预检请求视频https://www.doubao.com/chat/38438113387353346简单请求请求方法GET、HEAD、POST头部字段满足CORS安全规范、详见W3C请求头的Content-Type为text/plainmultipart/form-data上传图片application/x-www-form-uelencoded注意当开启credentials时Access-Control-Allow-Origin绝不能写成*必须明确指定具体的请求源Access-Control-Allow-Credentials它是什么HTTP 响应头属于 CORS跨域资源共享规则 作用告诉浏览器当前跨域请求是否允许携带「凭证信息」Access-Control-Allow-Credentials:true允许凭证包含三类CookieHTTP 认证信息Basic Auth客户端 SSL 证书预检请求非简单请求请求方法OPTIONS浏览器一开始不会发生真正的请求会先发一个预检请求服务器返回响应头匹配通过后才会发起真正的请求和普通请求完全一致发起真正请求之后就跟普通请求是一样的注意application/json提交表单的时候可能把请求头改成application/json这种属于预检请求2JSONP需要前后端配合使用使用 JSONPJSONP 是一种跨域数据传输方式通过动态插入script 标签中src属性引入外部资源的时候不受同源策略的限制的特点实现跨域访问JSONP是比较老的一种方案只支持get请求不支持post请求。前端人员用点特殊写法后端人员配合3代理服务器前端在vite和webpack中配置代理服务器仅对本地环境有效打包后无效3、img、script、link标签会跨域报错吗资源可以正常加载但是JS无法读取加载后的资源内容。例图片可以展示但是canvas无法跨域读取图片像素。4、跨域总结跨域根源是浏览器同源策略。本地开发我们使用vite/webpack代理解决调试跨域但是打包后失效。生产环境主流两种方案第一种CORS后端配置跨域响应头复杂请求触发OPTIONS预检第二种运维配置Nginx反向代理统一域名消除跨域。前端原生方案有JSONP只支持GET基本淘汰postMessage用于iframe跨页面通信WebSocket用于实时通讯。纯前端无法独立解决线上接口跨域问题。5、现在线上出现跨域报错你怎么排查1. 打开Network查看接口响应头是否存在跨域相关Header2. 区分环境本地没问题、线上报错 → 大概率本地proxy生效线上没有处理跨域3. 如果使用CORS检查Origin、是否开启credentials、预检OPTIONS是否正常返回4. 如果使用Nginx代理核对路由转发规则是否正确。6、Proxy代理为什么上线没用proxy是开发服务器提供的能力只有执行npm run dev本地运行时生效。执行build打包之后产物直接在浏览器运行不存在vite/webpack开发服务器代理逻辑自然消失无法解决线上跨域。7、CORS简单请求 和 复杂请求区别什么时候触发OPTIONS预检满足全部条件 简单请求不会发OPTIONS1. 请求方法GET / POST / HEAD2. Header仅允许Accept、Content-Type(仅限text/plain、application/x-www-form-urlencoded、multipart/form-data)只要不满足就是复杂请求浏览器先发OPTIONS预检请求询问服务器是否允许跨域预检通过才发送真实请求。常见场景请求携带Token、Content-Type:application/json。8、CORS中 Access-Control-Allow-Origin 设置 *为什么无法携带Cookie规范规定如果 Access-Control-Allow-Credentials: true开启携带cookieAccess-Control-Allow-Origin 不能配置为通配符*必须填写具体域名。9、JSONP原理为什么现在基本不用原理script标签不受同源策略限制后端接收callback参数返回 callback(数据)前端全局函数接收结果。缺点1. 仅支持GET请求2. 存在安全风险容易遭受XSS攻击3. 无法捕获请求错误。新项目基本淘汰。10、Nginx反向代理 和 CORS两种线上方案如何选择1CORS改动后端代码适合多前端项目、多个域名独立访问后端接口。2Nginx反向代理不需要修改后端代码统一域名不存在预检OPTIONS问题适合单一前端项目 解决跨域（cors、JSONP、代理服务器、）
1、什么是跨域所谓的跨域即违背了同源策略同源策略协议、主机号、端口号需要一致2、解决跨越的方法1cors是真正意义上解决跨域后端处理CORS将请求分为两类简单请求预检请求视频https://www.doubao.com/chat/38438113387353346简单请求请求方法GET、HEAD、POST头部字段满足CORS安全规范、详见W3C请求头的Content-Type为text/plainmultipart/form-data上传图片application/x-www-form-uelencoded注意当开启credentials时Access-Control-Allow-Origin绝不能写成*必须明确指定具体的请求源Access-Control-Allow-Credentials它是什么HTTP 响应头属于 CORS跨域资源共享规则 作用告诉浏览器当前跨域请求是否允许携带「凭证信息」Access-Control-Allow-Credentials:true允许凭证包含三类CookieHTTP 认证信息Basic Auth客户端 SSL 证书预检请求非简单请求请求方法OPTIONS浏览器一开始不会发生真正的请求会先发一个预检请求服务器返回响应头匹配通过后才会发起真正的请求和普通请求完全一致发起真正请求之后就跟普通请求是一样的注意application/json提交表单的时候可能把请求头改成application/json这种属于预检请求2JSONP需要前后端配合使用使用 JSONPJSONP 是一种跨域数据传输方式通过动态插入script 标签中src属性引入外部资源的时候不受同源策略的限制的特点实现跨域访问JSONP是比较老的一种方案只支持get请求不支持post请求。前端人员用点特殊写法后端人员配合3代理服务器前端在vite和webpack中配置代理服务器仅对本地环境有效打包后无效3、img、script、link标签会跨域报错吗资源可以正常加载但是JS无法读取加载后的资源内容。例图片可以展示但是canvas无法跨域读取图片像素。4、跨域总结跨域根源是浏览器同源策略。本地开发我们使用vite/webpack代理解决调试跨域但是打包后失效。生产环境主流两种方案第一种CORS后端配置跨域响应头复杂请求触发OPTIONS预检第二种运维配置Nginx反向代理统一域名消除跨域。前端原生方案有JSONP只支持GET基本淘汰postMessage用于iframe跨页面通信WebSocket用于实时通讯。纯前端无法独立解决线上接口跨域问题。5、现在线上出现跨域报错你怎么排查1. 打开Network查看接口响应头是否存在跨域相关Header2. 区分环境本地没问题、线上报错 → 大概率本地proxy生效线上没有处理跨域3. 如果使用CORS检查Origin、是否开启credentials、预检OPTIONS是否正常返回4. 如果使用Nginx代理核对路由转发规则是否正确。6、Proxy代理为什么上线没用proxy是开发服务器提供的能力只有执行npm run dev本地运行时生效。执行build打包之后产物直接在浏览器运行不存在vite/webpack开发服务器代理逻辑自然消失无法解决线上跨域。7、CORS简单请求 和 复杂请求区别什么时候触发OPTIONS预检满足全部条件 简单请求不会发OPTIONS1. 请求方法GET / POST / HEAD2. Header仅允许Accept、Content-Type(仅限text/plain、application/x-www-form-urlencoded、multipart/form-data)只要不满足就是复杂请求浏览器先发OPTIONS预检请求询问服务器是否允许跨域预检通过才发送真实请求。常见场景请求携带Token、Content-Type:application/json。8、CORS中 Access-Control-Allow-Origin 设置 *为什么无法携带Cookie规范规定如果 Access-Control-Allow-Credentials: true开启携带cookieAccess-Control-Allow-Origin 不能配置为通配符*必须填写具体域名。9、JSONP原理为什么现在基本不用原理script标签不受同源策略限制后端接收callback参数返回 callback(数据)前端全局函数接收结果。缺点1. 仅支持GET请求2. 存在安全风险容易遭受XSS攻击3. 无法捕获请求错误。新项目基本淘汰。10、Nginx反向代理 和 CORS两种线上方案如何选择1CORS改动后端代码适合多前端项目、多个域名独立访问后端接口。2Nginx反向代理不需要修改后端代码统一域名不存在预检OPTIONS问题适合单一前端项目