面试官：说下项目里跨域解决方案

今天我们来聊一个老生常谈的话题，跨域！又是跨域，烦不烦 ？网上跨域的文章那么多，跨的我眼睛都疲劳了，不看了不看了 🤣 别走...

我尽量用最简单的方式将常见的几种跨域解决方案给大家阐释清楚，相信认真看完本文，以后不管是作为受试者还是面试官，对于这块的知识都能够游刃有余。

什么是“跨源”

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

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

比如上面的这个 URL，协议是：https，域名是 www.google.com，端口是 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

这玩意儿就是利用了