关于前端jsonp跨域和一个简单的node服务搭建
先讲下概念
同源策略：是一种约定，浏览器最核心最基本的安全功能,（同域名，同协议，同端口）为同源
跨域：
跨（跳）：范围
域 (源)：域名，协议，端口
域名：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('开启了服务器');
})
一个简单粗暴的跨域就完成了！
