先讲下概念

  同源策略：是一种约定，浏览器最核心最基本的安全功能,（同域名，同协议，同端口）为同源

跨域：

  跨（跳）：范围
  域 (源)：域名，协议，端口

  域名：ip的一种昵称（为了更好记住ip地址）如：http:baidu.com 其实就是 ip地址119.75.217.109，为了更好的记住使用了域名代替

  协议：http（localhost），file（本地），https，ftp...

  端口：当前服务器中对应服务的标识（一个服务器中有n个的端口号且不可以重复） 如： http://localhost:80/ 这里80就是本机服务的一个端口

解决跨域：

   跨域方式有8-9个，常用的有3个

  1、高版本 浏览器的XMLHttpRequest+后端的请求头（前端正常ajax请求，后台设置Access-Control-Allow-Origin）
  2、服务器代理：需要服务端跨源访问别的数据，这个服务器文件又和当前同源，当前服务器文件就是同源的

  3、jsonp: jsonp+padding 内填充数据,低版本也支持，但是只有get请求，没有post请求

   使用jsonp条件： 

           1、数据必须是函数名+括号的 fn(a) 需要后台配合创建这个数据

           2、前端需要全局定义一个函数取接收数据，function fn(a){a}

           3、通过script请求

简单的说完概念后，当然就是上代码了：

html部分，这里的js是内嵌式
<!DOCTYPE html>

<html lang="en">

<head id="h">

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<button id="bun">跨域啊</button>

<script src="../js/jquery.js"></script>

<script>

    var js=''; //定义一个全部变量来储存创建的script标签

    function fn(data){//必须要和js.src连接中的callBack=fn的fn名字一致

        console.log(data);//拿到后台的数据 [1,2,3,4,5]

        $('#js').remove();//删除创建的script标签

    }

   $('#bun').onclick=function () {

        js=document.createElement('script');//动态创建script标签

        js.id='js';//创建一个is给标签，方便在使用完成后删除这个创建的script标签

        js.src='http://localhost:9008/get?callBack=fn';//这里的服务是拿node写的，指定的是本地的9008端口中的get路由

        $('#h').append(js);//把创建的script标签放到head 标签中

    }

</script>

</body>

</html>

这里的服务是基于node的express 创建的

安装express：npm install express

服务代码：

let expree=require('express'),//导入express

    app=expree();

app.get('/get', function(req, res) {//创建get路由

    var _callback = req.query.callBack;//获取到传递参数的回调

    var _data = [1,2,3,4,5];//随便写个数据，这里用的是数组

    if (_callback){//判断传递参数的回调

        res.type('text/javascript');//指定文件格式

        res.send(_callback + '(' + JSON.stringify(_data) + ')');//把获取的函数名和要传递的数据拼接返回给前端

    }

    else{//如果没有传递参数的回调处理

        res.json(_data);

    }

});

app.listen(9008,function () {//监听服务

    console.log('开启了服务器');

})

一个简单粗暴的跨域就完成了！

关于前端jsonp跨域和一个简单的node服务搭建的更多相关文章

  1. 前端 - jsonp 跨域ajax

    jsonp 跨域ajax原理: 浏览器同源策略限制 如何解决同源策略限制: 方式一: 利用创建script块,在其中执行src属性为 远程url 异域 用函数(返回值) 的形式返回参数 方式二: jq ...

  2. Jsonp跨域原理及简单应用

    浏览器的同源策略: 同源策略(Same Origin Policy)是一种约定,它是由Netscape提出的一个著名的安全策略,它限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互.这是 ...

  3. 利用JS跨域做一个简单的页面访问统计系统

    其实在大部分互联网web产品中,我们通常会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便可以在这些统计系统中看到自己网站页面具体的访问情况.但是有些时候,由于一些特殊情况,我们 ...

  4. 利用JS跨域做一个简单的页面訪问统计系统

    事实上在大部分互联网web产品中,我们一般会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便能够在这些统计系统中看到自己站点页面详细的訪问情况.可是有些时候,因为一些特殊情况,我 ...

  5. Jsonp跨域访问原理和实例

    >>什么是跨域 出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,当前域名的js只能读取同域下的窗口属性,即同源策略.而跨域就是通过某些手段来绕过同源策略限制,实 ...

  6. 前端跨域问题相关知识详解（原生js和jquery两种方法实现jsonp跨域）

    1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...

  7. [1.6W字] 浏览器跨域请求限制的详细原理分析&寻找一种最简单的方式实现XHR跨域(9种方法, 附大招可以纯前端实现跨域!)

    Title/ 浏览器跨域(CrossOrigin)请求的原理, 以及解决方案详细指南 #flight.Archives011 序: 最近看到又有一波新的创作活动了, 官方给出的话题中有一个" ...

  8. 前端跨域之jsonp跨域

    jsonp跨域原理 原理:因为通过script标签引入的js是不受同源策略的限制的(比如baidu.com的页面加载了google.com的js).所以我们可以通过script标签引入一个js或者一个 ...

  9. jsonp跨域简单应用（一）

    转载:http://www.cnblogs.com/cyg17173/p/5865364.html ashx+jsonp+document.referrer   -- 一年前学的JSONP 跨域,一年 ...

随机推荐

  1. LINUX下查找大文件及大的文件夹

    原帖地址:https://www.cnblogs.com/iyoume2008/p/6105590.html 今天正好碰到这样的问题,在博客园中看到有以上地址的一篇文章,照着上面的操作解决了问题,但是 ...

  2. python带有GIL解释器锁

    1.GIL是什么?GIL的全称是Global Interpreter Lock(全局解释器锁),来源是python设计之初的考虑,为了数据安全所做的决定. 2.每个CPU在同一时间只能执行一个线程(在 ...

  3. 一文带你了解Java反射机制

    想要获取更多文章可以访问我的博客 - 代码无止境. 上周上班的时候解决一个需求,需要将一批数据导出到Excel.本来公司的中间件组已经封装好了使用POI生成Excel的工具方法,但是无奈产品的需求里面 ...

  4. shiro创建配置对象

    在执行 Factory<org.apache.shiro.mgt.SecurityManager> factory = new IniSecurityManagerFactory(&quo ...

  5. Hadoop自学系列集(三) ---- Hadoop安装

    这节就开始讲述Hadoop的安装吧.在这之前先配置下SSH免密码登录,为什么需要配置这个呢?大家都知道Hadoop集群中可能有几十台机器甚至是上千台机器,而每次启动Hadoop都需要输入密码才能够登录 ...

  6. 2019杭电多校第二场hdu6602 Longest Subarray(线段树)

    Longest Subarray 题目传送门 解题思路 本题求一个最大的子区间,满足区间内的数字要么出现次数大于等于k次,要么没出现过.给定区间内的数字范围是1~c. 如果r为右边界,对于一种数字x, ...

  7. 测试通过mweb进行发布Title

    MWeb 是专业的 Markdown 写作.记笔记.静态博客生成软件,目前已支持 Mac,iPad 和 iPhone.MWeb 有以下特色: 软件本身: 使用原生的 macOS 技术打造,追求与系统的 ...

  8. 【原创】NES第一波：如何用通用型6502宏汇编器，制用NES/FC游戏。

    在163的博客关了呀.在这边重新开张了. 以后若网友有什么要长篇解答的问题,也在这儿作答. 作为第一波原创文章,我打算做一次小白示范.那就是一步一步的展示某个汇编编译器的用法. 一.科普 很多人认为程 ...

  9. Unity经典游戏教程之：弓之骑士

    版权声明: 本文原创发布于博客园"优梦创客"的博客空间(网址:http://www.cnblogs.com/raymondking123/)以及微信公众号"优梦创客&qu ...

  10. 5.Go-封装、继承、接口、多态和断言

    面向对象 Go语言开发者认为:面向对象就是特定类型(结构体)有着自己的方法,利用这个方法完成面向对象编程, 并没有提封装.继承.多态.所以Go语言进行面向对象编程时,重点在于灵活使用方法. Go语言有 ...