数据请求跨域解决方案(nodeJS)

一. 什么事浏览器的同源策略：

同源策略简单来说就是三同，同协议、同域名、同端口。个域内的脚本仅仅具有本域内的权限，可以理解为本域脚本只能读写本域内的资源，而无法访问其它域的资源。这种安全限制称为同源策略，有同源策略的原因就在于为了提升浏览器的安全性，但是，我们都知道安全性和方便性是成反比的，有了高的安全性必定给我们的操作带来低效，现代浏览器在安全性和可用性之间选择了一个平衡点。在遵循同源策略的基础上，选择性地为同源策略“开放了后门”。

二. 基于NodeJS的三种跨域技术实现的演示：

①：CORS（cross-origin sharing standard）跨域资源共享标准：跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站有权限访问哪些资源。对于NodeJS来说即是在服务端代码中设定允许访问的首部字段即可。

res.setHeader('Access-Control-Allow-Origin', '*');

页面代码：页面由webstorm直接打开，出于WS开启的服务器下

CORS DEMO

NodeJS服务端代码：利用node JS http核心模块开启一个服务器，这时，页面和服务器端处于不同域情况下

CORS DEMO

最终结果，跨域访问成功：

CORS DEMO

②：JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题，需要配合Jquery使用，解决跨域问题

页面代码：页面由webstorm直接打开，出于WS开启的服务器下,注意数据格式为

dataType：jsonp

JSONP DEMO

NodeJS服务端代码：

JSONP DEMO

运行结果：实现JSONP跨域

JSONP DEMO

原理：利用JSONP的数据格式来实现跨域的数据请求，需要利用callback将请求的数据包裹在其中，返回到客户端，我们可以看到NodeJS代码中有 console.log(parms.query.callback);这样一句代码，目的就是为了获得在不同域客户端请求数据时提交的callback名，这个callback名为一串字符串，利用这个callback将返回的参数包裹，才能实现跨域的数据请求

JSONP DEMO

③：<script>标签的跨域，个人理解为也就是JSONP跨域请求的原理，浏览器虽然有同源策略，但为了兼顾安全性和方便性，对<script><img>类的标签实现了跨域的作用，当需要通讯时，本站脚本创建一个元素，地址指向第三方的API网址，并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。

并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。作者：贺师俊链接：https://www.zhihu.com/question/19966531/answer/13502030来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。页面代码：页面由webstorm直接打开，出于WS开启的服务器下,可以动态的创建script标签和src增加代码重用性

<script>DEMO

NodeJS代码：一定要注意，返回的数据需要使用和前台代码一样的函数名进行包裹

<script>DEMO

结果演示：实现使用script进行跨域请求

<script>DEMO

以上为自创，请勿转载，不喜请狂喷。