得分点:
同源限制、协议、域名、端口、CORS、node中间件、JSONP、postmessage
标准回答
跨域:当前页面中的某个接口请求的地址和当前页面的地址如果协议
、域名
、端口
其中有一项不同,就说该接口跨域了。
跨域限制的原因:浏览器为了保证网页的安全,出的同源协议策略
。
跨域解决方案
- CORS:目前最常用的一种解决办法,通过设置后端允许跨域实现。
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader("Access-Control-Allow-Methods", "GET, PUT, OPTIONS, POST"); - node中间件、nginx反向代理:跨域限制的时候浏览器不能跨域访问服务器,node中间件和nginx反向代理,都是让请求发给代理服务器,静态页面和代理服务器是同源的,然后代理服务器再向后端服务器发请求,服务器和服务器之间不存在同源限制。
- JSONP:利用的原理是script标签可以跨域请求资源,将回调函数作为参数拼接在url中。后端收到请求,调用该回调函数,并将数据作为参数返回去,注意设置响应头返回文档类型,应该设置成javascript。
- postmessage:H5新增API,通过发送和接收API实现跨域通信。
跨域场景:前后端分离式开发、调用第三方接口