完整高频题库仓库地址：https://github.com/hzfe/aweso...完整高频题库阅读地址：https://hzfe.github.io/awesom...相关问题什么是跨域，为什么要跨域？为什么会有跨域限制？如何解决跨域答案？CORS[1]同源策略[2]跨域问题的根源是浏览器为了请求安全安全特性而引入的同源策略。当页面与请求的协议、主机名或端口不同时，浏览器判断两个来源不同，即为跨域请求。需要注意的是，跨域是浏览器的限制，服务器不受此影响。当发生跨域时，我们可以通过JSONP、CORS、postMessage等方式来解决。深入知识点1.跨域问题的根源跨域问题的根源是引入了基于同源策略的安全特性由浏览器请求安全。同源策略是浏览器非常重要的安全策略。基于该策略，可以限制非同源内容与当前页面的交互，从而降低页面被攻击的可能性。当页面和请求的协议、主机名或端口不同时，浏览器判断两个来源不同，导致跨域。需要注意的是，跨域是浏览器的限制，实际请求已经正常发送和响应。2.如何判断跨域cors如上图所示，一个origin由协议（Protocol）、主机名（Host）和端口（Port）组成。当两者相同时，浏览器判定两者同源，否则为跨域。3、跨域解决方案常见的前端跨域解决方案包括CORS、反向生成、JSONP等。3.1CORS（Cross-OriginResourceSharing）CORS是目前跨域问题最广泛的解决方案。该解决方案依赖于服务器/后端将Access-Control-Allow-*标头添加到响应标头中，以通知浏览器通过请求。涉及的侧CORS只需要服务端/后端支持，不涉及前端改动。具体实现方式CORS将请求分为简单请求（SimpleRequests）和预检请求（Preflightedrequests）。不同的场景有不同的行为：不触发预检请求的简单请求称为简单请求。当请求满足以下条件时为简单请求：请求方法：GET、HEAD、POST。请求头：Accept、Accept-Language、Content-Language、Content-Type。Content-Type仅支持：application/x-www-form-urlencoded、multipart/form-data、text/plain。需要预检请求当请求不满足上述简单请求的条件时，浏览器会自动向服务器发送OPTIONS请求，通过服务器返回的Access-Control-Allow-*判断是否允许该请求.CORS引入了以下几种以Access-Control-Allow-*开头的：Access-Control-Allow-Origin表示允许的来源Access-Control-Allow-Methods表示允许的请求方法Access-Control-Allow-Headers表示允许的请求头Access-Control-Allow-Credentials表示允许携带认证信息。当请求满足响应头的条件时，浏览器将发送并响应正式请求。3.2反向代理反向代理解决跨域问题是依靠同源服务器转发请求，将请求从跨域请求转化为同源请求。涉及的端反向代理只需要服务器/后端支持，几乎不涉及前端改动，只需要切换接口即可。反向代理的具体实现方法是在页面同域下配置一组反向代理服务。页面请求同域服务器，服务器请求实际上游服务器，然后将结果返回给前端。3.3JSONPJSONP是一个比较老的跨域解决方案。主要利用浏览器加载JavaScript资源文件时，不受同源策略限制，跨域获取数据。涉及端JSONP需要服务端和前端配合实现。JSONP的具体实现方式是基于浏览器在加载JavaScript资源文件时不受同源策略限制。具体过程如下：全局注册一个函数，例如：window.getHZFEMember=(num)=>console.log('HZFEMember:'+hzfeMember);。构造请求URL，例如：https://hzfe.org/api/hzfeMember?callback=getHZFEMember。生成一个标签中添加crossorigin="anonymous"，在返回的JS文件的响应头中添加Access-Control-Allow-Origin:*以捕获完整的错误堆栈。3、跨域、图片前端项目在图片处理过程中可能会遇到在Canvas上绘制图片后无法读取像素或无法导出base64的问题。这个问题也是同源策略导致的。解决方法同上，在图片中添加crossorigin="anonymous"，在返回图片文件的响应头中添加Access-Control-Allow-Origin:*。参考Cross-OriginResourceSharing(CORS)同源策略
