跨域问题及探索过程

前言

开发前后端分离项目中遇到了跨域问题

1、什么是跨域问题？

由于浏览器同源策略导致的对javascript的限制，使得浏览器限制使用当前源点之外的资源。

2、什么是同源策略？

域名（主域名+子域名）、协议、端口都一样。

3、为什么设置同源策略？

假设页面有两个模块，一个用来操作你账户余额的模块，一个用来看广告，如果同页面资源可以被别的源的数据随意调用（用来看广告的页面可以随意操作管理账户余额的模块），不安全。

4、怎么解决跨域问题？

跨域资源共享，替代性跨源技术

4.1、跨域资源共享怎么实现？

跨域资源共享的核心是靠自定义HTTP头达到浏览器和服务器进行“沟通”，和登录态有类似之处，使用媒介解决HTTP无状态问题。
具体实现包括：预检请求+凭据请求

① 预检请求：

浏览器可以通过设置请求源（Origin），请求方式（Method），请求头（Request-Head）的方式，发送请求“询问”服务器接受的参数。
服务器在响应中做出应答，同时可以设置缓存让浏览器“记住”它的回答一段时间（Age）。

② 凭据请求：

凭证
浏览器客户端 发送 withCredentials
前端 服务端 接受 Access-Control-Allow-Credentials
浏览器

4.2、替代性跨源技术：

图片检测（记录）：（只有GET请求，拿不到响应数据）：通过动态创建图片（了解到前端图片加载没有跨域限制），使用src的url发送get请求可以实现跨域资源的交流，利用onload和onerror方法可以确定响应什么时候来（实际上看不到响应数据，但是能感知到响应到了）。
JSONP：没看懂，貌似类似于img标签，变得不受限制，原理感觉和img差不多。

5、小结

作为后台的开发者，我过去把前端和浏览器当成一体，把他们都当作客户端。
事实上，相对于后端，两者确实都是客户端。问题在于，两者并不是一体，便捷的开发框架加速思维上的懒惰，多次前后端开发忘记两者的区别，陋习在这个问题上得到了很好的暴露，前端作为比后端更接近浏览器的服务端，与后端共同组成服务端，而它本身对于后端又扮演着客户端的角色。前端的一切也是使用资源调用实现的，只是作用与后端资源略有不同，想清楚这一点就很清楚web开发前后端分离很容易触发跨域问题，对于以上问题也就更清晰了。