面试官:请说下有哪些跨域解决方案

共 7761字,需浏览 16分钟

 ·

2021-11-18 10:40

今天我们来聊一个老生常谈的话题,跨域!又是跨域,烦不烦 ?网上跨域的文章那么多,跨的我眼睛都疲劳了,不看了不看了 🤣 别走...我尽量用最简单的方式将常见的几种跨域解决方案给大家阐释清楚,相信认真看完本文,以后不管是作为受试者还是面试官,对于这块的知识都能够游刃有余。

什么是“跨源”

**不是讲跨域吗 ?怎么又来个“跨源” ?字都能打错的 ?**😄...稍安勿躁,其实我们平常说的跨域是一种狭义的请求场景,简单来说,就是“跨“过浏览器的同源策略[1]去请求资“源”,所以我们叫它“跨源”也没啥问题。那么,跨源,源是什么?浏览器的同源策略什么是同源?协议,域名,端口都相同就是同源干巴巴的,能不能举个栗子?栗子:),有的有的

const url = 'https://www.google.com:3000'

比如上面的这个 URL,协议是:https,域名是 **www.google.com\*\*,端口是[2] 3000。不同源了会怎么样?会有很多限制,比如

  • Cookie,LocalStorage,IndexDB 等存储性内容无法读取
  • DOM 节点无法访问
  • Ajax 请求发出去了,但是响应被浏览器拦截了

我就想请求个东西,至于吗,为什么要搞个这么个东西限制我?基于安全考虑,没有它,你可能会遇到

  • Cookie劫持,被恶意网站窃取数据
  • 更容易受到 XSS,CSRF 攻击
  • 无法隔离潜在恶意文件
  • ... ...

所以,得有。正是因为浏览器同源策略的存在,你的 Ajax 请求有可能在发出去后就被拦截了,它还会给你报个错:

✘ Access to XMLHttpRequest at 'xxx' from origin 'xxx' has been block by CORS,
  policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这种发出去拿不到响应的感受,就像你在网上冲浪时,被一股神秘的东方力量限制了一样: 非常难受,所以,我们接下来就来看看怎么用科学的方法上网(啊呸,科学的方法解决跨域的问题)。

JSONP

这玩意儿就是利用了