jquery + node 通过 CORS 实现跨域访问,支持cookie和自定义header
时间:2022-06-22
本文章向大家介绍jquery + node 通过 CORS 实现跨域访问,支持cookie和自定义header,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
跨域有多种方式,现在的情况看来还是CORS更适合一些,有很多优点,比如浏览器正式支持、支持post、可以控制跨域访问的网站等。
我们来看看node如何实现cors方式的跨域。在网上找到了一些代码,考过来之后运行报错,可能这个是在express里面的写法吧,那么原生的写法是什么样子的呢?又找了半天,并且经过测试得到了原生的写法:
express的写法:
---app.js---
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
if(req.method=="OPTIONS") res.send(200);/*让options请求快速返回*/
else next();
});
node原生写法:
var http = require("http");
http.createServer(function (req, res) {
var a={
"a1":"www"
};
// 获得客户端的Cookie
var Cookies = {};
req.headers.cookie && req.headers.cookie.split(';').forEach(function( Cookie ) {
var parts = Cookie.split('=');
Cookies[ parts[ 0 ].trim() ] = ( parts[ 1 ] || '' ).trim();
});
console.log(Cookies);
//获取自定义头
console.log(req.headers.xtoken);
// 向客户端设置一个Cookie
res.setHeader('Set-Cookie','myCookie2=test');
//res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:8050"); //带cookie的话,不能写*
res.setHeader("Access-Control-Allow-Credentials", true); //允许带 cookie
res.setHeader("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With,xToken");
res.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.setHeader("X-Powered-By",' 3.2.1');
res.writeHeader(200, {'Content-Type': 'application/json'});
if(req.method=="OPTIONS"){
/*让options请求快速返回*/
res.end();
}
else
{
res.write(JSON.stringify(a));
res.end();
}
}
}).listen(8080);
需要先用 setHeader 进行设置,最后再用 writeHeader 进行设置。这样就可以了。
还有一些小地方,设置不好的话很容易报错。翻来覆去调试了好久才好。
然后就是客户端的写法了,由于客户端使用的框架不同,设置方式也有点差别,这里先介绍一下比较基本的jQuery的方式。
$.ajax({
type: "POST", //post方式
dataType: "JSON", //json格式的数据
cache: false, //客户端不缓存
headers: { //自定义头
xtoken: "1234qwert"
},
xhrFields: {
//允许跨域访问时添加cookie
withCredentials: true //true "Access-Control-Allow-Origin" 不能写* ;false可以写 *
},
crossDomain: true,
url: "http://127.0.0.1:8080/1234",
data: {"a":"11"}, //json格式的数据
//timeout: 2000,
error: function (request, textStatus, errorThrown) { //访问失败,自动停止加载动画,并且给出提示
alert("提交的时候发生错误!");
},
success: function (data) {
$("#div").html(data.a1);
}
});
这里的 xhrFields 设置,折腾半天,找了好久终于搞定了。其实只需要在后端加一行代码就行。
另外用了自定义头,客户端会自动发起两次请求。就是说你的代码之ajax了一次,但是浏览器会发起两个请求,后端会收到两个请求,所以有了
if(req.method=="OPTIONS") res.send(200); 这样的判断。
参考目录
1、node的原生 header: https://www.cnblogs.com/jay--zhang/p/6229139.html
2、node 接收 自定义 header
作者:zding92 来源:CSDN 原文:https://blog.csdn.net/u011481543/article/details/79582555
3、解决cookie的问题 :https://www.jb51.net/article/137278.htm
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python word实现读取及导出代码解析
- Python项目跨域问题解决方案
- keras的load_model实现加载含有参数的自定义模型
- opencv 图像加法与图像融合的实现代码
- PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
- python如何实现读取并显示图片(不需要图形界面)
- PHP文件操作实例总结【文件上传、下载、分页】
- Django中Aggregation聚合的基本使用方法
- ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
- PHP反射实际应用示例
- 解决Keras使用GPU资源耗尽的问题
- 如何表示python中的相对路径
- 基于Tensorflow读取MNIST数据集时网络超时的解决方式
- python中的错误如何查看
- python实现斗地主分牌洗牌