nodejs下载模块，解决跨域访问cors或jsonp，bootstrap，多文件，附件上传【诗书画唱】

2021-04-25 23:38 作者:诗书画唱 0人读过 | 我要投稿

这篇专栏的内容还是挺重要与常用的，写了几乎7个小时，比做视频还耗时，求多多三连！拜托读者们了！

目录：

解决跨域访问的方式一：cors

解决跨域访问的方式二：jsonp

jsonp的跨域访问中的Ajax获取数据时的url路径不可以不写callback=？，其中？会自动替换为function(data)函数。

个人理解：JSONP的跨域访问中必须要记得用end的方法传一个以JSON字符串为参数值的传参的函数，不可以直接传JSON字符串，不然会报错，要传”XXX(XXX)“格式的数据，后面前台的Ajax获取数据时，会用callback=？，把？自动转化成function(data)函数，？是个函数，callback是为了获取传过来的函数的习惯上命名的参数。

npm install multer -g【

的cmd方法：npm install 模块名 -g】

原始界面实现附件上传（多文件上传）

bootstrap实现附件上传（多文件上传）

【其实就是在原始界面上套模板】

讲义

理解跨域访问和同源访问

绑定点击事件的按钮的Ajax的简单例子的原创分析图

教程视频例子学习记录

方法：多去边创作视频或写歌词等等，边原速等等地看教程视频，遇到我认为重要的就截图记录等等，有没有听懂的部分就重新跳到那个部分听（一般戴耳机）。2件事同时做，会让我更高效且感兴趣和不会感到无聊。

解决跨域访问的方式一：cors

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

//serv.js

//引入http模块

let http = require('http');

//引入url模块

let url = require('url');

//创建一个后台服务

http.createServer(function(req,res){

//解决跨域访问的方式一：cors

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

res.setHeader("Access-Control-Allow-Headers", "Content-Type");

//发送的数据的格式必须是一个JSON字符串，

//如果发送的数据不是JSON字符串，那么这次调用就会失败

res.setHeader("content-type", "application/json");

//传送数据到前台页面去

res.end('{"act":"诗书画唱","pwd":666}');

}).listen(8788);

console.log('访问地址：http://127.0.0.1:8788');

http://127.0.0.1:8788/

<!DOCTYPE html>

<html>

<head>

$(function(){

$('#btn').click(function(){

$.ajax({

url: 'http://127.0.0.1:8788',

type: 'POST',

success: function(data){

console.log("获取的账号和密码的数据是："+data.act,data.pwd);

}

});

</script>

</head>

<body>

</body>

</html>

解决跨域访问的方式二：jsonp

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。其核心思想是利用JS标签里面的跨域特性进行跨域数据访问，在JS标签里面存在的是一个跨域的URL，实际执行的时候通过这个URL获得一段字符串，这段返回的字符串必须是一个合法的JS调用，通过EVAL这个字符串来完成对获得的数据的处理。

传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)

jsonp的跨域访问中的Ajax获取数据时的url路径不可以不写callback=？，其中？会自动替换为function(data)函数。

//serv.js

//引入http模块

let http = require('http');

//引入url模块

let url = require('url');

//创建一个后台服务

http.createServer(function(req,res){

//解决跨域访问的方式二：jsonp

//将url路径中的所有参数放到ps对象中

let ps = url.parse(req.url,true).query;

//获取url路径中callback参数的值

let cb = ps.callback;

res.end(cb + '({"act":"诗书画唱好帅","pwd":888})');

}).listen(8788);

console.log('访问地址：http://127.0.0.1:8788');

声明配置后就直接点启动调用就有运行结果，没有配置就运行前会让你选择一个配置，我们要选node.js的配置后才有效果

<!DOCTYPE html>

<html>

<head>

$(function(){

$('#btn').click(function(){

$.ajax({

url: 'http://127.0.0.1:8788?callback=?',

type: 'POST',

dataType: 'jsonp',//jsonp调用方式

success: function(data){

console.log("获取的账号和密码的数据分别是："+data.act,data.pwd);

}

});

</script>

</head>

<body>

</body>

</html>

原始界面实现附件上传（多文件上传）

npm install multer -g【下载模块的cmd方法：npm install 模块名 -g】

//upload.js

let express = require('express');

//引入附件上传模块

let multer = require('multer');

let app = express();

//中间件：对所有的请求都进行跨域访问设置处理

app.all('*',function(req,res,next){

res.header("Access-Control-Allow-Credentials", true);

res.header("Access-Control-Allow-Origin", "*");

res.header("Access-Control-Allow-Headers", "X-Requested-With");

res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

res.header("X-Powered-By", ' 3.2.1');

res.header("Content-Type", "application/json;charset=utf-8");

//执行下一个中间件

next();

});

//附件上传配置

let upload = multer({

storage: multer.diskStorage({

//设置上传以后的文件存在服务器的什么地方

//req就是请求对象

//file就是选中的文件

//cb回调函数

destination: function(req,file,cb){

//./指的是当前文件所在的文件夹

//./uploads表示上传的附件保存在j190802/uploads文件夹下

cb(null,'./uploads/');

//设置上传到服务器上的文件名是什么

filename: function(req,file,cb){

//获取选中的文件名

let originName = file.originalname;

console.log('选中的文件名是：' + originName);

//修改以后保存到服务器上的文件名

let newName = (new Date().getTime())

+ '-' + originName

console.log('保存到服务器上的文件名是：' + newName);

cb(null,newName);

}

})

});

//选中页面中name="logo"的标签进行附件上传

//总共上传2个文件

app.post('/up',upload.array('logo',2),function(req,res){

console.log('附件上传');

res.send({ret_code: '0'});

});

app.listen(8888);

console.log('附件上传路径:http://127.0.0.1:8888/up')

<!DOCTYPE html>

<html>

<head>

font-size: 50px;

}

</style>

</head>

<body>

<form action="http://127.0.0.1:8888/up" method="post"

enctype="multipart/form-data">

</form>

</body>

</html>

bootstrap实现附件上传（多文件上传）

【其实就是在原始界面上套模板】

<!DOCTYPE html>

<html>

<head>

$(function () {

var control = $("#file-1");

var uploadrul = "http://127.0.0.1:8888/up";

control.fileinput({

language: 'zh', //设置语言

uploadUrl: uploadrul, //上传的地址

allowedFileExtensions: ['png','jpg','gif'],//接收的文件后缀

showUpload: true, //显示批量上传按钮

showCaption: false,//是否显示标题

browseClass: "btn btn-primary", //按钮样式

dropZoneEnabled: true,//是否显示拖拽区域

//minImageWidth: 50, //图片的最小宽度

//minImageHeight: 50,//图片的最小高度

//maxImageWidth: 1000,//图片的最大宽度

//maxImageHeight: 1000,//图片的最大高度

//maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小

//minFileCount: 0,

maxFileCount: 100,

enctype: 'multipart/form-data',

validateInitialCount: true,

previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",

msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

});

//导入文件上传完成之后的事件

$("#file-1").on("fileuploaded", function (event, data, previewId, index) {

console.log(data.response.ret_code);

});

</script>

</head>

<body>

<form>

<div>

<h4 class="modal-title" id="myModalLabel">请选择图片</h4>

</div>

</div>

</form>

</body>

</html>

讲义

一、跨域访问

1、cors方式(设置相应对象res)

2、jsonp方式（获取callback参数，通过调用callback函数来传递数据）

"从http://localhost:8888/index.html页面上请求一个ajax，ajax的路径是

http://localhost:8080/demo/login"

协议或者Ip地址或者端口号或者项目名称中只有一个不相同，那么这种调用方式就是跨域访问

从http://localhost:8080/demo/login.jsp地址请求http://localhost:8080/demo/action/lg.action

，那么这种调用叫同源访问

二、附件上传

nodejs后台，html页面

理解跨域访问和同源访问

绑定点击事件的按钮的Ajax的简单例子的原创分析图

教程视频例子学习记录

一般来说，JSON字符串外面是单引号，里面是双引号，不这样的话容易报错，作用失效等等

标签：

nodejs下载模块，解决跨域访问cors或jsonp，bootstrap，多文件，附件上传【诗书画唱】

解决跨域访问的方式一：cors

解决跨域访问的方式二：jsonp

原始界面实现附件上传（多文件上传）

bootstrap实现附件上传（多文件上传）

【其实就是在原始界面上套模板】

讲义

理解跨域访问和同源访问

绑定点击事件的按钮的Ajax的简单例子的原创分析图

教程视频例子学习记录