跨域及三种常见解决方案

什么是跨域

跨域是浏览器受同源（协议、域名、端口）策略的限制，不允许不同源的站点之间进行某些操作（如发送ajax请求，操作dom，读取cookie），如果不进行特殊配置是不能操作成功的，并且控制台会报如下跨域错误：
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'xxxxxx' is therefore not allowed access

跨域出现的场景

两个常见的例子：

• 前后端分离的项目联调时，客户端和服务端ip不一致

  一般前端本地服务启动在localhost:8080上，服务端接口部署在联调服务器上，此时向联调服务器发送请求的话就会发生跨域

• 大型项目中可能需要多个服务，不同职责的服务部署在不同的端口上，甚至多个服务器上

  在当前网站页面上请求其他服务器或者其他端口上的接口，也会发生跨域，这种情况一般通过nginx反向代理解决

跨域解决方案

JSONP

原理：利用script标签的src属性不受同源策略的限制，并且资源加载完成后会被当作js脚本立即执行的特点，来达到跨域请求资源的目的。

需要做一些特殊处理：准备一个callback函数用于处理后端传来的数据，将callback函数的名字作为src属性中的query传给后端，后端收到后用callback函数名将数据包裹起来，使数据作为参数返回给前端，当资源加载完成，callback会立即被调用，此时的实参就是我们需要