疫情严重,视频面试的面试官问了阿风一个问题:“可以给我们讲一下你了解的跨域问题吗?”
阿风当然不晓得.深知自己技术水平的浅薄,于是借鉴了各方大佬的文章来理解这个狗屁膏药—>跨域问题.
同源策略
在前端开发过程中,常见的HTML标签,如<a/>,<form/>,<img/>,<script/>,<iframe/>以及ajax操作都可以指向一个资源地址或者说可以发起对一个资源的请求,那么这里所说的请求就存在同域请求和跨域请求.
所谓跨域请求就是
当发起请求的域,与该请求的资源指向的域,不一致(这里所有的域是指协议\域名\端口号的合集,同域就是协议域名端口号均相同)
跨域问题为什么会出现在前端开发当中
同源策略是浏览器的核心基础安全策略,作用是用来防御非法的攻击.但是我们不能因为要防御非法的攻击,就讲所有的跨域问题都拦截掉
- 在前端开发当中,经常会用到第三方的服务接口(例如mock server, fake API),随着专业化分工的出现,有很多专业的信息服务提供商为前端开发者提供各类接口,这种情况下就需要跨域请求(大部分用cros方式来解决)
- 前端后端属于不同的服务,在采用前后端分离这种架构的时候就存在跨域问题(大部分用反向代理的方法来解决)
解决方案
- 修改浏览器的安全设置(不推荐)
- JSONP
- 跨域资源共享 Cross-Origin Resource Sharing (CORS)
- iframe (不推荐)
- 反向代理
JSONP
JSON with Padding (JSONP) 是json的一种使用方式, 用于解决主流浏览器的跨域数据访问问题,在早三年,前端解决跨域问题中经常出现这种解决方法。
JSONP的原理就是：Ajax存在跨域安全问题，但是script标签不存在这类问题，于是乎就根据这种特性做文章找解决方案。
//remote.com / remote.js
let data = {
code:200,
msg:"data from remote"
}
LocalFuncation(data)
//index.html
<script src="http://remote.com/remote.js" type="text/javascript"><script/>
<script>
romoteFunction()
<script/>
CROS
cros是一个新的W3C标准,跨域资源共享详解，W3C新增的HTTP首部字段允许服务器 声明哪些来源请求 有权限访问哪些资源，换言之，cros允许浏览器像其声明了CORS的站进行跨域请求。
这种方式最主要的特点，就是会在相应的HTTP首部增加Access-Control-Allow-Origin等信息,从而判定哪些资源站可以进行跨域请求,还有几个其他相关的的HTTP首部信息进行更加精细化的控制,最主要的还是Access-Control-Allow-Origin
CORS与JSONP的使用目的相同，但是比JSONP更强大。
JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。
在本文中,我借鉴了以下博主大佬的内容
本文如有错误，欢迎指出
本人邮箱 [email protected]
