前端开发之路--常见的跨域问题解决方案一

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

同源策略

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

2345截图20181119003909.png

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

2345截图20181119003909.png

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

2345截图20181119003909.png

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

2345截图20181119003909.png

script标签解决方案

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

2345截图20181119003909.png

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

2345截图20181119003909.png