WEB前端开发中,在与后端交互或者调用其它服务接口的时候,应该都会遇过跨域请求数据的问题(最直接的表现就是请求数据失败),小编在这里总结了一些常见的跨域解决方案。

同源策略
在了解跨域(狭义)前,其实要先了解一下浏览器的同源策略,所谓的同源是指协议,域名,端口完全相同。
图中箭头所指依次是:协议,域名,端口。

浏览器的同源策略是出于基础安全的角度考虑的,如果不同源的话,网络上的资源和服务接口便会得以被随意访问和调用,会有很大的安全隐患,这也是同源策略的存在的理由。而只要协议,域名,端口任何一个不一致,便造成了跨域。

但是有时候出于某些原因,我们需要跨域去访问部分资源,所以要处理一下跨域问题,处理的方式大概分为两种:前端处理和后端处理。

在这里在科普一下:同源策略是在浏览器上实现的,其实服务端返回的数据是被浏览器所拦截的。

script标签解决方案
script标签是解决前端跨域的解决方案之一。
script标签通常是用来js文件,以及作为js脚本的书写域。
几乎所有浏览器都支持这个标签。

这里是要借助script的src属性去完成跨域,如上图所示,script标签引入的文件是来自其它源的资源,但并没有触发浏览器的同源策略,从不同域名下加载静态资源,而被浏览器允许,变相的解决了跨域问题。这种解决方案便是jsonp。

网友评论