跨域问题解决思路浅析

90 阅读2分钟

前言

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


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开发前后端分离很容易触发跨域问题,对于以上问题也就更清晰了。