面试:说一说跨域是什么?如何解决跨域问题?

面试 · 2023-08-02
面试:说一说跨域是什么?如何解决跨域问题?

得分点:
同源限制、协议、域名、端口、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实现跨域通信。

跨域场景:前后端分离式开发、调用第三方接口

面试题 跨域
Theme Jasmine by Kent Liao